@fluentui/web-components 3.0.0-rc.22 → 3.0.0-rc.23

package/dist/web-components.d.ts

@@ -2146,6 +2146,31 @@ export declare class BaseDropdown extends FASTElement {
      * This method can be overridden in derived classes to provide custom control elements, though this is not recommended.
      */
     protected insertControl(): void;
+    /**
+     * The duration in milliseconds after the last character search keystroke before the search string is cleared.
+     */
+    protected searchTimeoutMs: number;
+    /**
+     * The accumulated search string used to match option labels by prefix when printable characters are typed.
+     *
+     * @internal
+     */
+    private searchString;
+    /**
+     * The timeout id used to reset the search string.
+     *
+     * @internal
+     */
+    private searchTimeout?;
+    /**
+     * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+     * accumulated search string. When the string is a single character (or the same character repeated), matching
+     * options are cycled through; otherwise the string is treated as a prefix match.
+     *
+     * @param char - the printable character that was pressed
+     * @internal
+     */
+    private handleSearchCharacter;
     /**
      * Handles the keydown events for the dropdown.
      *

package/dist/web-components.js

@@ -7575,6 +7575,16 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
      * @internal
      */
     this._insertingControl = false;
+    /**
+     * The duration in milliseconds after the last character search keystroke before the search string is cleared.
+     */
+    this.searchTimeoutMs = 500;
+    /**
+     * The accumulated search string used to match option labels by prefix when printable characters are typed.
+     *
+     * @internal
+     */
+    this.searchString = "";
     this.elementInternals.role = "presentation";
   }
   get activeDescendant() {
@@ -8028,6 +8038,35 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
     dropdownButtonTemplate.render(this, this);
     this._insertingControl = false;
   }
+  /**
+   * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+   * accumulated search string. When the string is a single character (or the same character repeated), matching
+   * options are cycled through; otherwise the string is treated as a prefix match.
+   *
+   * @param char - the printable character that was pressed
+   * @internal
+   */
+  handleSearchCharacter(char) {
+    const isRepeating = this.searchString === char.repeat(this.searchString.length);
+    this.searchString += char;
+    let candidates = this.searchString.length > 1 ? this.filterOptions(this.searchString) : [];
+    let isCycling = false;
+    if (!candidates.length && isRepeating) {
+      candidates = this.filterOptions(char);
+      isCycling = true;
+    }
+    if (candidates.length) {
+      const activeOption = this.enabledOptions[this.activeIndex];
+      const currentPos = candidates.indexOf(activeOption);
+      const nextMatch = isCycling ? candidates[this.getEnabledIndexInBounds(currentPos + 1, candidates.length)] : currentPos >= 0 ? activeOption : candidates[0];
+      this.activeIndex = this.enabledOptions.indexOf(nextMatch);
+    }
+    clearTimeout(this.searchTimeout);
+    this.searchTimeout = setTimeout(() => {
+      this.searchString = "";
+      this.searchTimeout = void 0;
+    }, this.searchTimeoutMs);
+  }
   /**
    * Handles the keydown events for the dropdown.
    *
@@ -8047,14 +8086,15 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
         increment = 1;
         break;
       }
-      case " ": {
-        if (this.isCombobox) {
-          break;
-        }
-        e.preventDefault();
-      }
+      case " ":
       case "Enter":
       case "Tab": {
+        if (e.key === " ") {
+          if (this.isCombobox) {
+            break;
+          }
+          e.preventDefault();
+        }
         if (this.open) {
           this.selectOption(this.activeIndex, true);
           if (this.multiple) {
@@ -8073,6 +8113,12 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
       }
     }
     if (!increment) {
+      if (!this.isCombobox && e.key.length === 1 && e.key !== " " && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        if (!this.open) {
+          this.listbox.showPopover();
+        }
+        this.handleSearchCharacter(e.key);
+      }
       return true;
     }
     if (!this.open) {
@@ -8200,6 +8246,11 @@ const _BaseDropdown = class _BaseDropdown extends FASTElement {
   disconnectedCallback() {
     _BaseDropdown.AnchorPositionFallbackObserver?.disconnect();
     this.debounceController?.abort();
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = void 0;
+      this.searchString = "";
+    }
     super.disconnectedCallback();
   }
   /**