From abc5c61a069834ce4bf76fa2ad0b9e40318ec93c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sun, 13 Oct 2024 23:19:03 +0200 Subject: [PATCH] Fixed problem, that search field and search options did not close when clicking outside This fixes issue #701. For the search field this was caused by algolia/autocomplete lib, which do not support multiple autocomplete fields on a single page. If initailly loaded on the homepage, which features a second autocomplete, this one "steals" the input listening, and the one in the navbar do not close anymore when clicking outside. Custom code which triggers the closing of the autocomplete manually when clicking outside, was added as a workaround. --- assets/controllers/elements/part_search_controller.js | 10 ++++++++++ templates/components/search.macro.html.twig | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/assets/controllers/elements/part_search_controller.js b/assets/controllers/elements/part_search_controller.js index 4a70c6d2..c33cece0 100644 --- a/assets/controllers/elements/part_search_controller.js +++ b/assets/controllers/elements/part_search_controller.js @@ -186,5 +186,15 @@ export default class extends Controller { ]; }, }); + + //Try to find the input field and register a defocus handler. This is necessarry, as by default the autocomplete + //lib has problems when multiple inputs are present on the page. (see https://github.com/algolia/autocomplete/issues/1216) + const inputs = this.element.getElementsByClassName('aa-Input'); + for (const input of inputs) { + input.addEventListener('blur', () => { + this._autocomplete.setIsOpen(false); + }); + } + } } \ No newline at end of file diff --git a/templates/components/search.macro.html.twig b/templates/components/search.macro.html.twig index 9e9185bf..e62af2b1 100644 --- a/templates/components/search.macro.html.twig +++ b/templates/components/search.macro.html.twig @@ -1,7 +1,7 @@ {% macro settings_drodown(show_label_instead_icon = true) %}
-