@momentum-design/components 0.94.0 → 0.95.1

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

@@ -10,14 +10,12 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { live } from 'lit/directives/live.js';
 import { KEYS } from '../../utils/keys';
 import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
 import { FormInternalsMixin } from '../../utils/mixins/FormInternalsMixin';
 import { ROLE } from '../../utils/roles';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import { DEFAULTS as FORMFIELD_DEFAULTS, VALIDATION } from '../formfieldwrapper/formfieldwrapper.constants';
-import { TAG_NAME as OPTION_GROUP_TAG_NAME } from '../optgroup/optgroup.constants';
 import { TAG_NAME as OPTION_TAG_NAME } from '../option/option.constants';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -29,6 +27,8 @@ import styles from './select.styles';
  * The component ensures accessibility and usability while handling various use cases,
  * including long text truncation with tooltip support.
  *
+ * Every mdc-option should have a `value` attribute set to ensure proper form submission.
+ *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
@@ -41,7 +41,7 @@ import styles from './select.styles';
  *
  * @tagname mdc-select
  *
- * @slot default - This is a default/unnamed slot for options and/or option group.
+ * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.
  *
  * @event click - (React: onClick) This event is dispatched when the select is clicked.
  * @event change - (React: onChange) This event is dispatched when the select is changed.
@@ -68,11 +68,68 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
          */
         this.placement = POPOVER_PLACEMENT.BOTTOM_START;
         /** @internal */
-        this.baseIconName = ARROW_ICON.ARROW_DOWN;
-        /** @internal */
-        this.selectedValue = '';
-        /** @internal */
         this.displayPopover = false;
+        /** @internal */
+        this.initialSelectedOption = null;
+    }
+    getAllValidOptions() {
+        var _a;
+        return Array.from(((_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelectorAll(OPTION_TAG_NAME)) || []);
+    }
+    getFirstValidOption() {
+        var _a;
+        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(OPTION_TAG_NAME);
+    }
+    getLastValidOption() {
+        const options = this.getAllValidOptions();
+        return options.length > 0 ? options[options.length - 1] : null;
+    }
+    getFirstSelectedOption() {
+        var _a;
+        return (_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.querySelector(`${OPTION_TAG_NAME}[selected]`);
+    }
+    /**
+     * Handles the first updated lifecycle event.
+     * If an option is selected, use that as the value.
+     * If not, use the placeholder if it exists, otherwise use the first option.
+     */
+    async firstUpdated() {
+        await this.updateComplete;
+        this.modifyListBoxWrapper();
+        const firstSelectedOption = this.getFirstSelectedOption();
+        if (firstSelectedOption) {
+            this.initialSelectedOption = firstSelectedOption;
+            // do not fire events when setting the selected value
+            // which is already selected in the DOM on first update
+            this.setSelectedOption(firstSelectedOption);
+        }
+        else if (!this.placeholder) {
+            const firstValidOption = this.getFirstValidOption();
+            // We will show the first option as selected & fire
+            // and event since the selected option changed
+            this.setSelectedOption(firstValidOption);
+            this.fireEvents();
+        }
+        else if (this.placeholder) {
+            // If there is no default selected option
+            // then we call the native validity
+            this.setInputValidity();
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('softDisabled') ||
+            changedProperties.has('readonly')) {
+            if (this.disabled || this.softDisabled || this.readonly) {
+                // If the select is disabled, soft-disabled or readonly,
+                // we close the popover if it is open.
+                this.displayPopover = false;
+            }
+        }
+        if (changedProperties.has('dataAriaLabel')) {
+            this.modifyListBoxWrapper();
+        }
     }
     /**
      * Modifies the listbox wrapper to ensure it has the correct attributes
@@ -92,189 +149,143 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         slottedListBox.setAttribute('aria-labelledby', TRIGGER_ID);
     }
     /**
-     * A helper function which returns a flattened array of all valid options from within the slotted listbox.
-     * It takes care of the edge cases where the option is either a direct child or a
-     * child of an option group.
+     * A private method which is called when an option is clicked.
+     * It sets the selected option, removes selected from other options, updates the tabindex for all options,
+     * closes the popover, and fires the change and input events.
+     * @param event - The event which triggered this function.
      */
-    getAllValidOptions() {
-        var _a;
-        const optionsList = Array.from(((_a = this.slottedListboxes[0]) === null || _a === void 0 ? void 0 : _a.children) || []);
-        return ((optionsList === null || optionsList === void 0 ? void 0 : optionsList.map(option => {
-            if (option.tagName.toLowerCase() === OPTION_TAG_NAME) {
-                return option;
-            }
-            if (option.tagName.toLowerCase() === OPTION_GROUP_TAG_NAME) {
-                return Array.from(option.children).filter(optgroup => optgroup.tagName.toLowerCase() === OPTION_TAG_NAME);
-            }
-            return [];
-        }).flat()) || []);
+    handleOptionsClick(event) {
+        this.setSelectedOption(event.target);
+        this.displayPopover = false;
+        this.fireEvents();
     }
     /**
-     * Updates the tabindex and selected attribute of the options.
-     * If selectedOption is provided, it will be set as the selected option.
-     * Otherwise, it will set the first option as the selected option.
-     * @param selectedOption - The option which should be selected.
+     * Sets the selected option in the component state and updates the input element's value.
+     * This method ensures that only the selected option is marked as selected in the DOM,
+     * and updates the tabindex for all options accordingly.
+     * It also updates the validity of the input element based on the selected option.
+     * This method is called when an option is selected.
+     *
+     * @param option - The option element in DOM which gets selected.
      */
-    updateTabIndexForAllOptions(selectedOption) {
-        var _a;
-        let isTabIndexSet = false;
-        this.getAllValidOptions().forEach(option => {
-            if (option === selectedOption) {
-                this.setSelectedValue(option);
-                isTabIndexSet = true;
-                option.setAttribute('selected', '');
-                option.setAttribute('tabindex', '0');
-            }
-            else {
-                option === null || option === void 0 ? void 0 : option.setAttribute('tabindex', '-1');
-                option === null || option === void 0 ? void 0 : option.removeAttribute('selected');
-            }
+    setSelectedOption(option) {
+        var _a, _b;
+        // set the attribute 'selected' on the option in HTML and remove it from others
+        this.updateSelectedInChildOptions(option);
+        // update the tabindex for all options
+        this.updateTabIndexForAllOptions(option);
+        // set the selected option in the component state
+        this.selectedOption = option;
+        // update all form related values
+        this.value = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        this.internals.setFormValue(this.value);
+        this.inputElement.setAttribute('value', this.value);
+        this.setInputValidity();
+    }
+    /**
+     * Updates the tabindex of all options.
+     * Sets the tabindex of the selected option to '0' and others to '-1'.
+     *
+     * @param option - The option which tabIndex should be set to 0.
+     */
+    updateTabIndexForAllOptions(option) {
+        const options = this.getAllValidOptions();
+        const optionToGetTabIndex0 = option || options[0];
+        options.forEach(option => {
+            option.setAttribute('tabindex', option === optionToGetTabIndex0 ? '0' : '-1');
         });
-        if (!isTabIndexSet) {
-            // if no option is selected, set the first option as focused
-            (_a = this.getAllValidOptions()[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
-        }
     }
     /**
-     * A private method which is called when an option is clicked.
-     * It is used to update the tabindex and selected attribute of the options.
-     * @param event - The event which triggered this function.
+     * Sets selected attribute on the selected option and removes it from all options
+     * @param selectedOption - The option which gets selected
      */
-    handleOptionsClick(event) {
-        this.updateTabIndexForAllOptions(event.target);
+    updateSelectedInChildOptions(selectedOption) {
+        selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.setAttribute('selected', 'true');
+        const options = this.getAllValidOptions();
+        options.forEach(option => {
+            if (option !== selectedOption) {
+                option.removeAttribute('selected');
+            }
+        });
     }
     /**
-     * Sets the selected value based on the provided option element.
-     * It retrieves the 'label' attribute of the option, if present,
-     * otherwise it falls back to the option's text content.
-     * @param option - The option element from which to set the selected value.
+     * A private method which is called to fire the change and input events.
+     * It dispatches the input and change events with the selected option's value and label.
      */
-    setSelectedValue(option) {
-        var _a, _b, _c, _d;
-        this.selectedValueText = (_b = (_a = option === null || option === void 0 ? void 0 : option.getAttribute('label')) !== null && _a !== void 0 ? _a : option === null || option === void 0 ? void 0 : option.textContent) !== null && _b !== void 0 ? _b : '';
-        this.selectedIcon = option === null || option === void 0 ? void 0 : option.getAttribute('prefix-icon');
-        this.selectedValue = (_d = (_c = option === null || option === void 0 ? void 0 : option.getAttribute('value')) !== null && _c !== void 0 ? _c : option === null || option === void 0 ? void 0 : option.textContent) !== null && _d !== void 0 ? _d : '';
-        this.value = this.selectedValue;
-        // Set form value
-        this.internals.setFormValue(this.selectedValue);
-        this.manageRequired();
-        // dispatch a change event when a value is selected
-        this.dispatchInput(this.selectedValue);
-        this.dispatchChange(this.selectedValue);
+    fireEvents() {
+        this.dispatchInput(this.selectedOption);
+        this.dispatchChange(this.selectedOption);
     }
     /**
-     * Manages the required state of the select.
-     * If the select is required and no value is selected,
-     * it sets a custom validity message based on the validationMessage property.
-     * If the select is not required or a value is selected, it clears the custom validity.
-     * This method is called to ensure that the select behaves correctly in forms.
+     * Sets the validity of the input element based on the selected option.
+     * If the selected option is not set and the select is required,
+     * it sets a custom validation message.
+     * If the selected option is set or the select is not required,
+     * it clears the custom validation message.
+     * This method is called to ensure that the select component behaves correctly
+     * in form validation scenarios, especially when the select is required.
      * @internal
      */
-    manageRequired() {
-        if (!this.selectedValue && this.required) {
-            if (this.validationMessage) {
-                this.inputElement.setCustomValidity(this.validationMessage);
-            }
-            else {
-                this.inputElement.setCustomValidity('');
-            }
+    setInputValidity() {
+        if (!this.selectedOption && this.required && this.validationMessage) {
+            this.inputElement.setCustomValidity(this.validationMessage);
+        }
+        else {
+            this.inputElement.setCustomValidity('');
         }
         this.setValidity();
     }
     /**
+     * Resets the select to its initially selected option.
      * @internal
-     * Resets the select to its initial state.
      */
     formResetCallback() {
-        this.selectedValue = '';
-        this.selectedValueText = undefined;
-        this.selectedIcon = null;
-        this.internals.setFormValue(this.selectedValue);
-        this.updateTabIndexForAllOptions();
-        this.requestUpdate();
+        var _a;
+        const optionToResetTo = this.initialSelectedOption || null;
+        if (((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== (optionToResetTo === null || optionToResetTo === void 0 ? void 0 : optionToResetTo.value)) {
+            this.setSelectedOption(optionToResetTo);
+            // fire events to notify the change in case of reset
+            this.fireEvents();
+        }
     }
     /** @internal */
     formStateRestoreCallback(state) {
-        this.selectedValue = state;
-        this.selectedValueText = state;
-    }
-    dispatchChange(value) {
-        if (!value) {
-            return;
+        var _a;
+        const optionToRestoreTo = this.getAllValidOptions().find(option => option.value === state || option.label === state);
+        if (((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== (optionToRestoreTo === null || optionToRestoreTo === void 0 ? void 0 : optionToRestoreTo.value)) {
+            this.setSelectedOption(optionToRestoreTo || null);
+            // fire events to notify the change in case of restore
+            this.fireEvents();
         }
+    }
+    dispatchChange(option) {
         this.dispatchEvent(new CustomEvent('change', {
-            detail: { value },
+            detail: { value: option === null || option === void 0 ? void 0 : option.value, label: option === null || option === void 0 ? void 0 : option.label },
             composed: true,
             bubbles: true,
         }));
     }
-    dispatchInput(value) {
-        if (!value) {
-            return;
-        }
+    dispatchInput(option) {
         this.dispatchEvent(new CustomEvent('input', {
-            detail: { value },
+            detail: { value: option === null || option === void 0 ? void 0 : option.value, label: option === null || option === void 0 ? void 0 : option.label },
             composed: true,
             bubbles: true,
         }));
     }
     /**
-     * Handles the keydown event on the select element when the popover is open.
-     * The options are as follows:
-     * - SPACE or ENTER: Selects the currently active option and closes the popover.
-     * - HOME: Sets focus and tabindex on the first option.
-     * - END: Sets focus and tabindex on the last option.
-     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
-     * @param event - The keyboard event.
+     * Handles the click event on the visual combobox.
+     * If the select is disabled, soft-disabled or readonly, it does nothing.
+     * If the popover is already open, it closes it.
+     * If it is closed, it opens it.
+     * @param event - The mouse event which triggered this function.
      */
-    handlePopoverOnOpen(event) {
-        var _a;
-        switch (event.key) {
-            case KEYS.TAB: {
-                const focusedOptionIndex = this.getAllValidOptions().findIndex(option => option === event.target);
-                this.setFocusAndTabIndex(focusedOptionIndex);
-                event.preventDefault();
-                break;
-            }
-            case KEYS.SPACE:
-                this.closePopover();
-                event.preventDefault();
-                break;
-            case KEYS.ENTER:
-                this.closePopover();
-                event.preventDefault();
-                // if the popover is closed, then we submit the form.
-                (_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
-                break;
-            case KEYS.HOME:
-                this.setFocusAndTabIndex(0);
-                event.preventDefault();
-                break;
-            case KEYS.END:
-                this.setFocusAndTabIndex(this.getAllValidOptions().length - 1);
-                event.preventDefault();
-                break;
-            case KEYS.ARROW_DOWN:
-            case KEYS.ARROW_UP:
-            case KEYS.PAGE_DOWN:
-            case KEYS.PAGE_UP:
-                this.handleOptionsNavigation(event);
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
     handleClickCombobox(event) {
         if (this.disabled || this.softDisabled || this.readonly) {
             return;
         }
-        if (this.displayPopover) {
-            this.closePopover();
-        }
-        else {
-            this.openPopover();
-        }
+        // If the popover is already open, we close it.
+        // If it is closed, we open it.
+        this.displayPopover = !this.displayPopover;
         event.stopPropagation();
     }
     /**
@@ -293,173 +304,126 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
         switch (event.key) {
             case KEYS.ARROW_DOWN:
             case KEYS.ARROW_UP:
-                this.openPopover();
+                this.displayPopover = true;
                 // Prevent the default browser behavior of scrolling down
                 event.preventDefault();
                 break;
             case KEYS.ENTER:
             case KEYS.SPACE:
-                this.openPopover();
+                this.displayPopover = true;
                 // Prevent the default browser behavior of scrolling down
                 event.preventDefault();
                 event.stopPropagation();
                 break;
-            case KEYS.HOME:
-                this.openPopover();
-                this.setFocusAndTabIndex(0);
+            case KEYS.HOME: {
+                this.displayPopover = true;
+                const firstOption = this.getFirstValidOption();
+                if (firstOption) {
+                    firstOption === null || firstOption === void 0 ? void 0 : firstOption.focus();
+                    this.updateTabIndexForAllOptions(firstOption);
+                }
                 event.preventDefault();
                 break;
-            case KEYS.END:
-                this.openPopover();
-                this.setFocusAndTabIndex(this.getAllValidOptions().length - 1);
+            }
+            case KEYS.END: {
+                this.displayPopover = true;
+                const lastOption = this.getLastValidOption();
+                if (lastOption) {
+                    lastOption.focus();
+                    this.updateTabIndexForAllOptions(lastOption);
+                }
                 event.preventDefault();
                 break;
+            }
             default:
                 break;
         }
     }
     /**
-     * Handles the navigation of options when the user presses
-     * ArrowUp, ArrowDown, PageUp, or PageDown keys.
-     * @param event - The keyboard event that triggered the navigation.
+     * Handles the keydown event on the select element when the popover is open.
+     * The options are as follows:
+     * - HOME: Sets focus and tabindex on the first option.
+     * - END: Sets focus and tabindex on the last option.
+     * - ARROW_DOWN, ARROW_UP, PAGE_DOWN, PAGE_UP: Handles navigation between options.
+     * @param event - The keyboard event.
      */
-    handleOptionsNavigation(event) {
-        const options = this.getAllValidOptions();
-        const currentIndex = options.findIndex(option => option === event.target);
-        const newIndex = this.getNewIndexBasedOnKey(event.key, currentIndex, options.length);
-        if (newIndex !== -1) {
-            this.setFocusAndTabIndex(newIndex);
-            // Prevent the default browser behavior of scrolling down
-            // when pressing ArrowUp, ArrowDown, PageUp, or PageDown keys
-            event.preventDefault();
+    handlePopoverKeydown(event) {
+        switch (event.key) {
+            case KEYS.HOME: {
+                const firstOption = this.getFirstValidOption();
+                this.focusAndUpdateTabIndexes(firstOption);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.END: {
+                const lastOption = this.getLastValidOption();
+                this.focusAndUpdateTabIndexes(lastOption);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.ARROW_DOWN: {
+                const options = this.getAllValidOptions();
+                const currentIndex = options.findIndex(option => option === event.target);
+                const newIndex = Math.min(currentIndex + 1, options.length - 1);
+                this.focusAndUpdateTabIndexes(options[newIndex]);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.ARROW_UP: {
+                const options = this.getAllValidOptions();
+                const currentIndex = options.findIndex(option => option === event.target);
+                const newIndex = Math.max(currentIndex - 1, 0);
+                this.focusAndUpdateTabIndexes(options[newIndex]);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.PAGE_DOWN: {
+                const options = this.getAllValidOptions();
+                const currentIndex = options.findIndex(option => option === event.target);
+                const newIndex = Math.min(currentIndex + 10, options.length - 1);
+                this.focusAndUpdateTabIndexes(options[newIndex]);
+                event.preventDefault();
+                break;
+            }
+            case KEYS.PAGE_UP: {
+                const options = this.getAllValidOptions();
+                const currentIndex = options.findIndex(option => option === event.target);
+                const newIndex = Math.max(currentIndex - 10, 0);
+                this.focusAndUpdateTabIndexes(options[newIndex]);
+                event.preventDefault();
+                break;
+            }
+            default:
+                break;
         }
     }
     /**
-     * Calculates the new index based on the pressed navigation key.
-     * Supports ArrowUp, ArrowDown, PageUp, and PageDown keys for navigating options.
-     * - ArrowDown: Moves focus to the next option, if available.
-     * - ArrowUp: Moves focus to the previous option, if available.
-     * - PageDown: Moves focus 10 options down or to the last option.
-     * - PageUp: Moves focus 10 options up or to the first option.
-     *
-     * @param key - The navigation key that was pressed.
-     * @param currentIndex - The current index of the focused option.
-     * @param optionsLength - The total number of options.
-     * @returns The new index to focus on, or -1 if no movement is possible.
+     * Focuses the given option and updates the tabindex for all options.
+     * @param option - The option to focus.
+     * @internal
      */
-    getNewIndexBasedOnKey(key, currentIndex, optionsLength) {
-        if (key === KEYS.ARROW_DOWN && currentIndex !== optionsLength - 1) {
-            return currentIndex + 1;
-        }
-        if (key === KEYS.ARROW_UP && currentIndex > 0) {
-            return currentIndex - 1;
-        }
-        if (key === KEYS.PAGE_DOWN) {
-            // Jumps visual focus down 10 options (or to last option).
-            return currentIndex + 10 > optionsLength ? optionsLength - 1 : currentIndex + 10;
-        }
-        if (key === KEYS.PAGE_UP) {
-            // Jumps visual focus up 10 options (or to first option).
-            return currentIndex - 10 < 0 ? 0 : currentIndex - 10;
+    focusAndUpdateTabIndexes(option) {
+        if (option) {
+            option.focus();
+            this.updateTabIndexForAllOptions(option);
         }
-        return -1;
-    }
-    setFocusAndTabIndex(newIndex) {
-        const options = this.getAllValidOptions();
-        const targetOption = options[newIndex];
-        if (targetOption) {
-            targetOption.focus();
-            options.forEach((node, index) => {
-                const newTabindex = newIndex === index ? '0' : '-1';
-                node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
-            });
-        }
-    }
-    openPopover() {
-        this.displayPopover = true;
-        this.baseIconName = ARROW_ICON.ARROW_UP;
-    }
-    closePopover() {
-        this.displayPopover = false;
-        this.baseIconName = ARROW_ICON.ARROW_DOWN;
     }
     /**
-     * Handles the first updated lifecycle event.
-     * If an option is selected, use that as the value.
-     * If not, use the placeholder if it exists, otherwise use the first option.
+     * 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.
+     * For example when a form is submitted and the native input is focused,
+     * we want to focus the visual combobox so that the user can see the selected option
+     * and can interact with it.
+     * @internal
      */
-    async firstUpdated() {
-        await this.updateComplete;
-        this.modifyListBoxWrapper();
-        const options = this.getAllValidOptions();
-        const selectedOptionIndex = options.findIndex(option => option === null || option === void 0 ? void 0 : option.hasAttribute('selected'));
-        if (selectedOptionIndex !== -1) {
-            this.setSelectedValue(options[selectedOptionIndex]);
-            this.updateTabIndexForAllOptions(options[selectedOptionIndex]);
-        }
-        else if (!this.placeholder) {
-            // We will show the first option as selected.
-            this.setSelectedValue(options[0]);
-            this.updateTabIndexForAllOptions();
-        }
-        else if (this.placeholder) {
-            // If there is no default selected option
-            // then we set the placeholder and call the native validity
-            this.manageRequired();
-        }
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('disabled') ||
-            changedProperties.has('softDisabled') ||
-            changedProperties.has('readonly')) {
-            if (this.disabled || this.softDisabled || this.readonly) {
-                this.closePopover();
-            }
-        }
-        if (changedProperties.has('dataAriaLabel')) {
-            this.modifyListBoxWrapper();
-        }
-    }
-    handleOnChange() {
-        this.selectedValue = this.inputElement.value;
-        this.internals.setFormValue(this.selectedValue);
+    handleNativeInputFocus() {
+        this.visualCombobox.focus();
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         return html `
       ${this.renderLabel()}
       <div part="container">
-        <select
-          part="native-select"
-          id="${this.id}"
-          tabindex="-1"
-          aria-hidden="true"
-          name="${this.name}"
-          size="1"
-          .value="${live(this.selectedValue)}"
-          ?autofocus="${this.autofocus}"
-          ?disabled="${this.disabled}"
-          ?required="${this.required}"
-          aria-disabled="${ifDefined(this.disabled || this.softDisabled)}"
-          @change="${this.handleOnChange}"
-          @mousedown="${(event) => event.preventDefault()}"
-        >
-          ${this.getAllValidOptions().map(option => {
-            var _a, _b;
-            return html `
-              <option
-                part="native-select"
-                value="${(_a = option.getAttribute('value')) !== null && _a !== void 0 ? _a : ''}"
-                label="${(_b = option.getAttribute('label')) !== null && _b !== void 0 ? _b : ''}"
-                ?disabled="${!!option.hasAttribute('disabled')}"
-                ?selected="${!!option.hasAttribute('selected')}"
-              >
-                ${option.textContent}
-              </option>
-            `;
-        })}
-        </select>
         <div
           id="${TRIGGER_ID}"
           part="base-container"
@@ -478,24 +442,48 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           aria-disabled="${ifDefined(this.disabled || this.softDisabled)}"
           aria-readonly="${ifDefined(this.readonly)}"
         >
-          ${this.selectedIcon
-            ? html `<mdc-icon length-unit="rem" size="1" name="${this.selectedIcon}" part="selected-icon"></mdc-icon>`
+          ${((_b = this.selectedOption) === null || _b === void 0 ? void 0 : _b.prefixIcon)
+            ? html `<mdc-icon
+                length-unit="rem"
+                size="1"
+                name="${(_c = this.selectedOption) === null || _c === void 0 ? void 0 : _c.prefixIcon}"
+                part="selected-icon"
+              ></mdc-icon>`
             : nothing}
           <mdc-text
-            part="base-text ${this.selectedValueText ? 'selected' : ''}"
+            part="base-text ${((_d = this.selectedOption) === null || _d === void 0 ? void 0 : _d.label) ? 'selected' : ''}"
             type="${TYPE.BODY_MIDSIZE_REGULAR}"
             tagname="${VALID_TEXT_TAGS.SPAN}"
           >
-            ${(_b = this.selectedValueText) !== null && _b !== void 0 ? _b : this.placeholder}
+            ${(_f = (_e = this.selectedOption) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : this.placeholder}
           </mdc-text>
           <div part="icon-container">
-            <mdc-icon size="1" length-unit="rem" name="${this.baseIconName}"></mdc-icon>
+            <mdc-icon
+              size="1"
+              length-unit="rem"
+              name="${this.displayPopover ? ARROW_ICON.ARROW_UP : ARROW_ICON.ARROW_DOWN}"
+            ></mdc-icon>
           </div>
         </div>
+        <input
+          id="${this.id}"
+          part="native-input"
+          name="${this.name}"
+          type="text"
+          ?autofocus="${this.autofocus}"
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?readonly=${this.readonly}
+          tabindex="-1"
+          aria-hidden="true"
+          @focus=${this.handleNativeInputFocus}
+          @invalid=${this.setInputValidity}
+          aria-disabled="${ifDefined(this.disabled || this.softDisabled)}"
+        />
         <mdc-popover
           trigger="manual"
           triggerid="${TRIGGER_ID}"
-          @keydown="${this.handlePopoverOnOpen}"
+          @keydown="${this.handlePopoverKeydown}"
           interactive
           ?visible="${this.displayPopover}"
           role=""
@@ -505,8 +493,12 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
           focus-trap
           size
           placement="${this.placement}"
-          @closebyescape="${this.closePopover}"
-          @closebyoutsideclick="${this.closePopover}"
+          @closebyescape="${() => {
+            this.displayPopover = false;
+        }}"
+          @closebyoutsideclick="${() => {
+            this.displayPopover = false;
+        }}"
           style="--mdc-popover-max-width: 100%; --mdc-popover-max-height: ${this.height};"
         >
           <slot @click="${this.handleOptionsClick}"></slot>
@@ -542,27 +534,15 @@ __decorate([
     __metadata("design:type", Array)
 ], Select.prototype, "slottedListboxes", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", String)
-], Select.prototype, "baseIconName", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], Select.prototype, "selectedValueText", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Select.prototype, "selectedIcon", void 0);
+    query(`[id="${TRIGGER_ID}"]`),
+    __metadata("design:type", HTMLDivElement)
+], Select.prototype, "visualCombobox", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], Select.prototype, "selectedValue", void 0);
+], Select.prototype, "selectedOption", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], Select.prototype, "displayPopover", void 0);
-__decorate([
-    query('select'),
-    __metadata("design:type", HTMLInputElement)
-], Select.prototype, "inputElement", void 0);
 export default Select;