[myfaces-tobago] 01/02: feat(selectMany): hide dropdown-menu manually

[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

commit 24b9c5ecf288e711db613e58c31ff9397c6d9eaa
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Wed Nov 2 09:03:07 2022 +0100

    feat(selectMany): hide dropdown-menu manually
    
    Issue: TOBAGO-2159
---
 .../renderkit/renderer/SelectManyRenderer.java     |  1 -
 .../src/main/ts/tobago-select-many.ts              | 40 +++++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
index 76bbf572ee..ccd7cc34ce 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/SelectManyRenderer.java
@@ -180,7 +180,6 @@ public class SelectManyRenderer<T extends AbstractUISelectMany> extends SelectMa
     writer.writeAttribute(HtmlAttributes.TITLE, title, true);
     if (!inline) {
       writer.writeAttribute(DataAttributes.BS_TOGGLE, "dropdown", false);
-      writer.writeAttribute(DataAttributes.BS_AUTO_CLOSE, "outside", false);
     }
     writer.writeAttribute(Arias.EXPANDED, Boolean.FALSE.toString(), false);
 
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 7b2788bb32..ef4516196c 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
@@ -24,6 +24,10 @@ class SelectMany extends HTMLElement {
     SHOW: "show"
   };
 
+  private readonly Key = {
+    ESCAPE: "Escape"
+  };
+
   constructor() {
     super();
   }
@@ -65,9 +69,11 @@ class SelectMany extends HTMLElement {
     // todo: implement remove badge
 
     window.addEventListener("resize", this.resizeEvent.bind(this));
+    document.addEventListener("click", this.clickEvent.bind(this));
+    document.addEventListener("keydown", this.keydownEvent.bind(this));
     this.addEventListener(BootstrapEvents.DROPDOWN_SHOW, this.showDropdown.bind(this));
     this.addEventListener(BootstrapEvents.DROPDOWN_SHOWN, this.shownDropdown.bind(this));
-    this.addEventListener(BootstrapEvents.DROPDOWN_HIDE, this.hideDropdown.bind(this));
+    this.addEventListener(BootstrapEvents.DROPDOWN_HIDE, this.preventBootstrapHide.bind(this));
     this.addEventListener(BootstrapEvents.DROPDOWN_HIDDEN, this.HiddenDropdown.bind(this));
 
     // init badges
@@ -118,7 +124,7 @@ class SelectMany extends HTMLElement {
       this.filterInput.insertAdjacentHTML("beforebegin", this.getRowTemplate(itemValue, row.innerText));
 
       // todo: nicer adding the @click with lit-html
-      const current = this.filterInput.parentElement.querySelector(".btn-group[data-tobago-value='"+ itemValue +"']");
+      const current = this.filterInput.parentElement.querySelector(".btn-group[data-tobago-value='" + itemValue + "']");
       current.addEventListener("click", this.removeBadge.bind(this));
 
       // highlight list row
@@ -173,8 +179,34 @@ class SelectMany extends HTMLElement {
     // console.log("### shownDropdown");
   }
 
-  private hideDropdown(event: Event): void {
-    // console.log("### hideDropdown");
+  private preventBootstrapHide(event: CustomEvent): void {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  private clickEvent(event: MouseEvent): void {
+    console.log("click auf this?");
+    event.composedPath().forEach(
+
+      (value, index, array) => {
+        if(value === this) {
+          console.log("yo");
+          return;
+        }
+        console.log("ding!");
+    });
+
+    console.log(`### clickEvent ${event.relatedTarget} ${event.target} ${event.currentTarget}`);
+  }
+
+  private keydownEvent(event: KeyboardEvent) {
+    if (event.key === this.Key.ESCAPE) {
+      this.hideDropdown();
+    }
+  }
+
+  private hideDropdown(): void {
+    console.log("### hideDropdown");
   }
 
   private HiddenDropdown(event: Event): void {