[myfaces-tobago] branch t5_selectMany updated: feat(selectMany): fix focus

[hn...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch t5_selectMany
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/t5_selectMany by this push:
     new 4f1a8cbbd6 feat(selectMany): fix focus
4f1a8cbbd6 is described below

commit 4f1a8cbbd69c1bc1a82945b0bc9f910af4453ac2
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Fri Nov 4 22:19:25 2022 +0100

    feat(selectMany): fix focus
    
    Issue: TOBAGO-2159
---
 .../src/main/ts/tobago-select-many.ts              | 52 ++++------------------
 1 file changed, 8 insertions(+), 44 deletions(-)

diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
index e250d64867..26630bdeab 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-select-many.ts
@@ -83,12 +83,6 @@ class SelectMany extends HTMLElement {
     document.addEventListener("click", this.clickEvent.bind(this));
     this.filterInput.addEventListener("focus", this.focusEvent.bind(this));
     this.filterInput.addEventListener("blur", this.blurEvent.bind(this));
-    this.badgeCloseButtons.forEach(
-      (closeButton) => {
-        closeButton.addEventListener("focus", this.focusEvent.bind(this));
-        closeButton.addEventListener("blur", this.blurEvent.bind(this));
-      }
-    );
 
     // init badges
     this.querySelectorAll("option:checked").forEach(
@@ -126,13 +120,8 @@ class SelectMany extends HTMLElement {
   }
 
   sync(option: HTMLOptionElement) {
-    console.log("this", this);
-    console.log("option", option);
-    console.log("ds", option.value);
     const itemValue = option.value;
-    console.log("itemValue", itemValue);
     const row: HTMLTableRowElement = this.tbody.querySelector(`[data-tobago-value="${itemValue}"]`);
-    console.log("row", row);
     if (option.selected) {
       // create badge
       this.filterInput.insertAdjacentHTML("beforebegin",
@@ -149,9 +138,7 @@ class SelectMany extends HTMLElement {
       row.classList.add(this.CssClass.TABLE_PRIMARY);
     } else {
       // remove badge
-      const selectField1 = this.selectField;
-      console.log("selectField1", selectField1);
-      const badge = selectField1.querySelector(`[data-tobago-value="${itemValue}"]`);
+      const badge = this.selectField.querySelector(`[data-tobago-value="${itemValue}"]`);
       const previousElementSibling = badge.previousElementSibling;
       badge.remove();
       if (previousElementSibling) {
@@ -207,8 +194,8 @@ class SelectMany extends HTMLElement {
   }
 
   private clickEvent(event: MouseEvent): void {
-    if (this.isPartOfSelectField(event.target as Element)) {
-      this.filterInput.focus();
+    if (this.isDeleted(event.target as Element)) {
+      // do nothing, this is probably a removed badge
     } else if (this.isPartOfComponent(event.target as Element)) {
       this.filterInput.focus();
     } else {
@@ -237,16 +224,8 @@ class SelectMany extends HTMLElement {
     }
   }
 
-  private isPartOfSelectField(element: Element): boolean {
-    if (element) {
-      if (this.selectField.id === element.id) {
-        return true;
-      } else {
-        return element.parentElement ? this.isPartOfSelectField(element.parentElement) : false;
-      }
-    } else {
-      return false;
-    }
+  private isDeleted(element: Element): boolean {
+    return element.closest("html") === null;
   }
 
   private hideDropdown(): void {
@@ -279,12 +258,9 @@ class SelectMany extends HTMLElement {
   }
 
   private blurEvent(event: FocusEvent): void {
-    if (event.relatedTarget === null) {
-      //this must be a mouse click; if tabbed out the relatedTarget is the new focused element
-    } else {
-      if (this.isPartOfSelectField(event.relatedTarget as Element)) {
-        //to nothing
-      } else if (this.isPartOfComponent(event.relatedTarget as Element)) {
+    if (event.relatedTarget !== null) {
+      //relatedTarget is the new focused element; null indicate a mouseclick or an inactive browser window
+      if (this.isPartOfComponent(event.relatedTarget as Element)) {
         this.filterInput.focus();
       } else {
         this.setFocus(false);
@@ -300,18 +276,6 @@ class SelectMany extends HTMLElement {
     }
   }
 
-  private focusFilter(event: MouseEvent): void {
-    // console.log("### focusFilter");
-  }
-
-  private blurFilter(event: MouseEvent): void {
-    // console.log("### blurFilter");
-  }
-
-  private blurSelect(event: MouseEvent): void {
-    // console.log("### blurSelect");
-  }
-
   private initList() {
     const tbody = this.tbody;
     tbody.addEventListener("click", this.select.bind(this));