@meetelise/chat 1.50.6 → 1.51.0

package/src/WebComponent/me-select.ts

@@ -29,20 +29,47 @@ export class MESelect extends LitElement {
   @state()
   private activeOptionIndex: number | null = null;
 
+  @state()
+  private searchTerm = "";
+
   @query("#select", true)
   meSelect!: HTMLDivElement;
 
+  @query("#selectText", true)
+  selectInput!: HTMLInputElement;
+
   focus = (): void => {
-    this.meSelect.focus();
+    this.selectInput.focus();
+  };
+
+  private closeSelect = (): void => {
+    this.isOpen = false;
+    this.searchTerm = "";
+    this.activeOption = null;
+    this.activeOptionIndex = null;
+  };
+
+  private openSelect = (): void => {
+    this.isOpen = true;
   };
 
   toggleSelect = (): void => {
     if (this.isOpen) {
-      this.activeOption = null;
+      this.closeSelect();
+    } else {
+      this.openSelect();
+      this.selectInput.focus();
     }
-    this.isOpen = !this.isOpen;
   };
 
+  private get visibleOptions(): MeSelectOption[] {
+    const searchTerm = this.searchTerm.trim().toLowerCase();
+    if (!searchTerm) return this.options;
+    return this.options.filter((option) =>
+      option.label.toLowerCase().includes(searchTerm)
+    );
+  }
+
   setSelectedOption = (option: MeSelectOption, closeSelect = true): void => {
     if (this.value !== option.value) {
       this.value = option.value;
@@ -51,8 +78,7 @@ export class MESelect extends LitElement {
     }
 
     if (closeSelect) {
-      this.isOpen = !this.isOpen;
-      this.activeOption = null;
+      this.closeSelect();
     }
 
     if (!this.value) {
@@ -86,6 +112,12 @@ export class MESelect extends LitElement {
     }
   }
 
+  private handleSearchInput = (e: Event): void => {
+    this.searchTerm = (e.target as HTMLInputElement).value;
+    this.activeOption = null;
+    this.activeOptionIndex = null;
+  };
+
   constructor() {
     super();
     // TODO: the current thing works, but want to investigate more. why doesn't it work with `this`?
@@ -94,8 +126,8 @@ export class MESelect extends LitElement {
     // – for example, to Window, Document, or some element in the main DOM – you should add the
     // listener in connectedCallback and remove it in disconnectedCallback." (https://lit.dev/docs/components/events/)
     document.addEventListener("click", (event: MouseEvent) => {
-      if (!event.composedPath().includes(this.meSelect)) {
-        this.isOpen = false;
+      if (!event.composedPath().includes(this)) {
+        this.closeSelect();
       }
     });
   }
@@ -120,6 +152,7 @@ export class MESelect extends LitElement {
         height: 14px;
         display: flex;
         align-items: center;
+        color: inherit;
       }
 
       ul {
@@ -215,6 +248,13 @@ export class MESelect extends LitElement {
   render(): TemplateResult {
     const activeIndex = this.activeOptionIndex;
     const accessibleName = this.placeholder ?? "Select";
+    const visibleOptions = this.visibleOptions;
+    const selectedLabel = this.options.find(
+      (o) => o.value === this.value
+    )?.label;
+    const inputValue = this.isOpen
+      ? this.searchTerm
+      : selectedLabel || this.value || "";
     return html`
       <div id="outer-select-container">
         <div
@@ -224,34 +264,24 @@ export class MESelect extends LitElement {
             ["webchat-font__desktop"]: !isMobile(),
             ["webchat-font__mobile"]: isMobile(),
           })}
-          tabindex="0"
-          role="combobox"
-          aria-haspopup="listbox"
-          aria-expanded=${this.isOpen ? "true" : "false"}
-          aria-controls=${this.listboxId}
-          aria-label=${accessibleName}
-          aria-activedescendant=${this.isOpen && activeIndex != null
-            ? this.optionId(activeIndex)
-            : ""}
-          @click=${() => (this.isOpen = !this.isOpen)}
+          @mousedown=${(e: MouseEvent) => {
+            if (e.target !== this.selectInput) e.preventDefault();
+          }}
+          @click=${this.toggleSelect}
           @keydown="${(e: KeyboardEvent) => {
             switch (e.key) {
               case "Enter":
-              case " ":
                 e.preventDefault();
                 if (this.isOpen && this.activeOption) {
                   this.setSelectedOption(this.activeOption);
-                } else {
-                  this.toggleSelect();
+                } else if (!this.isOpen) {
+                  this.openSelect();
                 }
                 break;
               case "Escape":
-                e.preventDefault();
-                this.isOpen = false;
-                break;
-              case "Tab":
                 if (this.isOpen) {
                   e.preventDefault();
+                  this.closeSelect();
                 }
                 break;
               case "ArrowUp":
@@ -261,41 +291,55 @@ export class MESelect extends LitElement {
                     0,
                     this.activeOptionIndex - 1
                   );
-                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.activeOption = visibleOptions[this.activeOptionIndex];
                   this.adjustScrollToActiveOption();
                 }
                 break;
-
               case "ArrowDown":
                 e.preventDefault();
-                if (this.isOpen) {
+                if (this.isOpen && visibleOptions.length > 0) {
                   if (this.activeOptionIndex == null) {
                     this.activeOptionIndex = 0;
-                  } else if (this.activeOptionIndex < this.options.length - 1) {
+                  } else if (
+                    this.activeOptionIndex <
+                    visibleOptions.length - 1
+                  ) {
                     this.activeOptionIndex++;
                   }
-                  this.activeOption = this.options[this.activeOptionIndex];
+                  this.activeOption = visibleOptions[this.activeOptionIndex];
                   this.adjustScrollToActiveOption();
                 }
                 break;
             }
           }}"
         >
-          ${this.options.find((o) => o.value === this.value)?.label
-            ? html` <span id="selectText"
-                >${this.options.find((o) => o.value === this.value)?.label ??
-                this.placeholder}</span
-              >`
-            : html` <input
-                readonly
-                tabindex="-1"
-                placeholder="${this.placeholder}"
-                .value="${this.options.find((o) => o.value === this.value)
-                  ?.label ||
-                this.value ||
-                ""}"
-                id="selectText"
-              />`}
+          <input
+            id="selectText"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded=${this.isOpen ? "true" : "false"}
+            aria-controls=${this.listboxId}
+            aria-label=${accessibleName}
+            aria-autocomplete="list"
+            aria-activedescendant=${this.isOpen && activeIndex != null
+              ? this.optionId(activeIndex)
+              : ""}
+            autocomplete="off"
+            ?readonly=${!this.isOpen}
+            .value=${inputValue}
+            placeholder=${this.isOpen
+              ? selectedLabel || this.placeholder
+              : this.placeholder}
+            @click=${(e: Event) => {
+              e.stopPropagation();
+              if (!this.isOpen) this.openSelect();
+            }}
+            @focus=${() => {
+              if (!this.isOpen) this.openSelect();
+            }}
+            @blur=${this.closeSelect}
+            @input=${this.handleSearchInput}
+          />
 
           <svg
             width="10"
@@ -312,7 +356,7 @@ export class MESelect extends LitElement {
         </div>
         ${this.isOpen
           ? html`<ul id=${this.listboxId} role="listbox">
-              ${this.options.map(
+              ${visibleOptions.map(
                 (option, index) =>
                   html`<li
                     id=${this.optionId(index)}
@@ -320,6 +364,7 @@ export class MESelect extends LitElement {
                     aria-selected=${this.value === option.value
                       ? "true"
                       : "false"}
+                    @mousedown=${(e: MouseEvent) => e.preventDefault()}
                     @click="${() => this.setSelectedOption(option)}"
                     @mousemove="${() => {
                       this.activeOption = option;