@momentum-design/components 0.122.17 → 0.122.18

package/dist/components/select/select.component.d.ts

@@ -66,6 +66,8 @@ declare const Select_base: import("../../utils/mixins/index.types").Constructor<
  * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).
  */
 declare class Select extends Select_base implements AssociatedFormControl {
+    /** @internal */
+    private itemsStore;
     /**
      * The placeholder text which will be shown on the text if provided.
      */
@@ -126,11 +128,18 @@ declare class Select extends Select_base implements AssociatedFormControl {
     /** @internal */
     displayPopover: boolean;
     /** @internal */
+    private animationFrameId?;
+    /** @internal */
     private initialSelectedOption;
     /** @internal */
-    private itemsStore;
+    private debounceSearch?;
+    /** @internal */
+    private debounceTime;
+    /** @internal */
+    private searchString;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     /** @internal */
     get navItems(): Option[];
     /**
@@ -218,16 +227,35 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @param event - The mouse event which triggered this function.
      */
     private handleClickCombobox;
+    private setupDebounceSearch;
+    private debounceSearchKey;
+    /**
+     * Filters the given option labels based on the given search key.
+     * It returns a new array of options that have labels starting with the given search key case-insensitive.
+     *
+     * @param options - The options to filter.
+     * @param searchKey - The search key to filter by.
+     * @returns The filtered options.
+     */
+    private filterOptionsBySearchKey;
+    /**
+     * Handles the selection of an option based on the filter string.
+     * It will select the first option from the filtered list if it is not empty.
+     * If the filtered list is empty, it will do nothing.
+     * @param searchKey - The filter string to search for options.
+     */
+    private handleSelectedOptionBasedOnFilter;
     /**
      * Handles the keydown event on the select element when the popover is closed.
      * The options are as follows:
-     * - ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.
-     * - ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.
+     * - ARROW_DOWN, ARROW_UP, ENTER, SPACE: Opens the popover and prevents the default scrolling behavior.
      * - HOME: Opens the popover and sets focus and tabindex on the first option.
      * - END: Opens the popover and sets focus and tabindex on the last option.
+     * - Any key: Opens the popover and sets focus on the first option which starts with the key.
      * @param event - The keyboard event.
      */
     private handleKeydownCombobox;
+    private resetTabIndexAndSetFocusAfterUpdate;
     /**
      * If the native input is focused, it will focus the visual combobox.
      * This is to ensure that the visual combobox is focused when the native input is focused.
@@ -237,6 +265,8 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @internal
      */
     private handleNativeInputFocus;
+    private handleSelectedOptionByKeyInput;
+    private handleKeydownPopover;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/select/select.component.js

@@ -24,6 +24,7 @@ import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/
 import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
 import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { debounce } from '../../utils/debounce';
 import { ARROW_ICON, LISTBOX_ID, TRIGGER_ID } from './select.constants';
 import styles from './select.styles';
 /**
@@ -136,16 +137,68 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
         /** @internal */
         this.initialSelectedOption = null;
         /** @internal */
+        this.debounceTime = 500;
+        /** @internal */
+        this.searchString = '';
+        /** @internal */
+        this.onStoreUpdate = (option, changeType, index, options) => {
+            switch (changeType) {
+                case 'added':
+                    option.setAttribute('tabindex', '-1');
+                    break;
+                case 'removed': {
+                    if (index === -1 || options.length === 0) {
+                        return;
+                    }
+                    let newIndex = index + 1;
+                    if (newIndex >= options.length) {
+                        newIndex = index - 1;
+                    }
+                    if (newIndex === -1 && this.displayPopover) {
+                        this.displayPopover = false;
+                        this.handleNativeInputFocus();
+                        return;
+                    }
+                    if (option.tabIndex === 0) {
+                        this.resetTabIndexes(newIndex);
+                    }
+                    if (option.hasAttribute('selected')) {
+                        let newOption = null;
+                        // If there is no placeholder, then we set the first option as selected option.
+                        // If the the first option is about to removed then we set the next (second) option as selected.
+                        // The next (second) option will become first one, when the option is fully removed.
+                        if (!this.placeholder) {
+                            newOption = index === 0 ? options[newIndex] : options[0];
+                        }
+                        this.setSelectedOption(newOption);
+                    }
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        /** @internal */
+        this.isValidItem = (item) => item.matches(`${OPTION_TAG_NAME}:not([disabled])`);
+        this.addEventListener(LIFE_CYCLE_EVENTS.MODIFIED, this.handleModifiedEvent);
         this.itemsStore = new ElementStore(this, {
             isValidItem: this.isValidItem,
             onStoreUpdate: this.onStoreUpdate,
         });
-        this.addEventListener(LIFE_CYCLE_EVENTS.MODIFIED, this.handleModifiedEvent);
     }
     connectedCallback() {
         super.connectedCallback();
         this.loop = 'false';
         this.initialFocus = 0;
+        this.setupDebounceSearch();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        // cancel any pending debounced action and clear DOM timeouts
+        (_a = this.debounceSearch) === null || _a === void 0 ? void 0 : _a.cancel();
+        // cancel any pending animation frames
+        window.cancelAnimationFrame(this.animationFrameId);
     }
     /** @internal */
     get navItems() {
@@ -198,36 +251,6 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
         }
     }
     /** @internal */
-    onStoreUpdate(option, changeType, index) {
-        switch (changeType) {
-            case 'added':
-                option.setAttribute('tabindex', '-1');
-                break;
-            case 'removed': {
-                if (index === -1 || option.tabIndex !== 0) {
-                    return;
-                }
-                let newIndex = index + 1;
-                if (newIndex >= this.navItems.length) {
-                    newIndex = index - 1;
-                }
-                if (newIndex === -1) {
-                    this.displayPopover = false;
-                    this.handleNativeInputFocus();
-                    return;
-                }
-                this.resetTabIndexes(newIndex);
-                break;
-            }
-            default:
-                break;
-        }
-    }
-    /** @internal */
-    isValidItem(item) {
-        return item.matches(`${OPTION_TAG_NAME}:not([disabled])`);
-    }
-    /** @internal */
     getFirstSelectedOption() {
         return this.navItems.find(option => option.hasAttribute('selected'));
     }
@@ -461,13 +484,64 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
         this.displayPopover = !this.displayPopover;
         event.stopPropagation();
     }
+    setupDebounceSearch() {
+        this.debounceSearch = debounce(() => {
+            // for every 500ms, we will reset the search string.
+            this.searchString = '';
+        }, this.debounceTime);
+    }
+    debounceSearchKey(letter) {
+        var _a;
+        (_a = this.debounceSearch) === null || _a === void 0 ? void 0 : _a.call(this);
+        // add most recent letter to saved search string
+        this.searchString += letter;
+        return this.searchString;
+    }
+    /**
+     * Filters the given option labels based on the given search key.
+     * It returns a new array of options that have labels starting with the given search key case-insensitive.
+     *
+     * @param options - The options to filter.
+     * @param searchKey - The search key to filter by.
+     * @returns The filtered options.
+     */
+    filterOptionsBySearchKey(options, searchKey) {
+        return options.filter(option => { var _a; return (_a = option.getAttribute('label')) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(searchKey.toLowerCase()); });
+    }
+    /**
+     * Handles the selection of an option based on the filter string.
+     * It will select the first option from the filtered list if it is not empty.
+     * If the filtered list is empty, it will do nothing.
+     * @param searchKey - The filter string to search for options.
+     */
+    handleSelectedOptionBasedOnFilter(searchKey) {
+        const startIndex = this.navItems.findIndex(option => option.tabIndex === 0) + 1;
+        const orderedOptions = [...this.navItems.slice(startIndex), ...this.navItems.slice(0, startIndex)];
+        // First, we search for an exact match with then entire search key
+        const filteredResults = this.filterOptionsBySearchKey(orderedOptions, searchKey);
+        let newOption = null;
+        if (filteredResults.length) {
+            // If the key is an exact match, then we set the first option
+            [newOption] = filteredResults;
+        }
+        else if (searchKey.split('').every(letter => letter === searchKey[0])) {
+            // If the key is same, then we cycle through all options which start with the same letter
+            const nextOptionFromList = this.navItems[startIndex];
+            const optionsWhichStartWithSameLetter = this.filterOptionsBySearchKey(orderedOptions, searchKey[0]);
+            const nextPossibleOption = optionsWhichStartWithSameLetter.filter(option => option === nextOptionFromList);
+            newOption = nextPossibleOption.length ? nextPossibleOption[0] : optionsWhichStartWithSameLetter[0];
+        }
+        if (this.navItems.indexOf(newOption) !== -1) {
+            this.resetTabIndexAndSetFocusAfterUpdate(this.navItems.indexOf(newOption));
+        }
+    }
     /**
      * Handles the keydown event on the select element when the popover is closed.
      * The options are as follows:
-     * - ARROW_DOWN, ARROW_UP, SPACE: Opens the popover and prevents the default scrolling behavior.
-     * - ENTER: Opens the popover, prevents default scrolling, and submits the form if the popover is closed.
+     * - ARROW_DOWN, ARROW_UP, ENTER, SPACE: Opens the popover and prevents the default scrolling behavior.
      * - HOME: Opens the popover and sets focus and tabindex on the first option.
      * - END: Opens the popover and sets focus and tabindex on the last option.
+     * - Any key: Opens the popover and sets focus on the first option which starts with the key.
      * @param event - The keyboard event.
      */
     handleKeydownCombobox(event) {
@@ -477,32 +551,48 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
         switch (event.key) {
             case KEYS.ARROW_DOWN:
             case KEYS.ARROW_UP:
-                this.displayPopover = true;
-                // Prevent the default browser behavior of scrolling down
-                event.preventDefault();
-                event.stopPropagation();
-                break;
             case KEYS.ENTER:
             case KEYS.SPACE:
                 this.displayPopover = true;
-                // Prevent the default browser behavior of scrolling down
-                event.preventDefault();
                 event.stopPropagation();
                 break;
             case KEYS.HOME: {
                 this.displayPopover = true;
-                this.resetTabIndexAndSetFocus(0);
-                event.preventDefault();
+                this.resetTabIndexAndSetFocusAfterUpdate(0);
                 break;
             }
             case KEYS.END: {
                 this.displayPopover = true;
-                this.resetTabIndexAndSetFocus(this.navItems.length - 1);
-                event.preventDefault();
+                this.resetTabIndexAndSetFocusAfterUpdate(this.navItems.length - 1);
                 break;
             }
-            default:
+            default: {
+                if (event.key.length === 1) {
+                    this.displayPopover = true;
+                    this.handleSelectedOptionByKeyInput(event.key);
+                }
                 break;
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    resetTabIndexAndSetFocusAfterUpdate(newOptionIndex) {
+        if (this.displayPopover) {
+            // When the popover is opened (`this.displayPopover` is true), the underlying DOM (especially
+            // the select listbox inside the popover) may not yet be fully rendered or attached to the layout tree.
+            // Calling `resetTabIndexAndSetFocus()` immediately in the same frame would fail because
+            // the listbox or its scroll container might still have a height of `0` or not be ready for focus.
+            // Wrapping the call inside `window.requestAnimationFrame()` defers the execution until the next
+            // browser paint cycle — ensuring that:
+            //   1. The DOM updates from Lit’s rendering cycle are flushed.
+            //   2. The popover and its scroll container are laid out and measurable.
+            //   3. The correct element can safely receive focus and scroll into view.
+            this.animationFrameId = window.requestAnimationFrame(() => {
+                // We need to reset the tabindex after the component renders,
+                // so that the dropdown will open and the focus can be set.
+                this.resetTabIndexAndSetFocus(newOptionIndex);
+            });
         }
     }
     /**
@@ -516,6 +606,15 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
     handleNativeInputFocus() {
         this.visualCombobox.focus();
     }
+    handleSelectedOptionByKeyInput(searchKey) {
+        const searchString = this.debounceSearchKey(searchKey);
+        this.handleSelectedOptionBasedOnFilter(searchString);
+    }
+    handleKeydownPopover(event) {
+        if (event.key.length === 1) {
+            this.handleSelectedOptionByKeyInput(event.key);
+        }
+    }
     render() {
         var _a, _b, _c, _d, _e, _f;
         return html `
@@ -589,6 +688,7 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
           focus-back-to-trigger
           focus-trap
           size
+          @keydown="${this.handleKeydownPopover}"
           boundary="${ifDefined(this.boundary)}"
           strategy="${ifDefined(this.strategy)}"
           placement="${this.placement}"