From 8c592cfe5e1b534e5732fe2121fe0a861f9ce529 Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Wed, 12 Apr 2023 11:59:45 +0200 Subject: [PATCH] =?UTF-8?q?Execute=20=E2=80=9Cfocus=20out=E2=80=9D=20handl?= =?UTF-8?q?er=20in=20tag=20input=20when=20clicking=20any=20other=20element?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Apparently i was only testing that control with tab, because clicking on any other non-focusable element (e.g., a table row) it did not add the new tag and would not dispatch the “numerus-tag-out” custom element, which is why i have seen it now. This is equivalent to AlpineJS’s @click.outside, and i was already using it for the multiselect dropdown. The isConnected check is because i probably found some cases in the dropdown’s handler, but i can not remeber now, but since AlpineJS does it too, i guess it is important. --- web/static/numerus.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/static/numerus.js b/web/static/numerus.js index 9916f5e..4bf11e9 100644 --- a/web/static/numerus.js +++ b/web/static/numerus.js @@ -345,12 +345,14 @@ class Tags extends HTMLDivElement { this.search.addEventListener('keydown', this.onSearchKeydownHandler); this.onFocusOutHandler = (e) => { if (this.contains(e.target)) return; + if (!e.target.isConnected) return; if (this.search.value && this.search.value.trim() !== '') { this.createTag(); } this.dispatchEvent(new CustomEvent("numerus-tags-out", {bubbles: true})) }; window.addEventListener('focusin', this.onFocusOutHandler); + document.addEventListener('click', this.onFocusOutHandler); this.rebuild(); } @@ -359,6 +361,7 @@ class Tags extends HTMLDivElement { disconnectedCallback() { if (this.initialized) { this.removeTags(); + document.removeEventListener('click', this.onFocusOutHandler); window.removeEventListener('focusin', this.onFocusOutHandler); this.onFocusOutHandler = null; this.search.removeEventListener('keydown', this.onSearchKeydownHandler);