@carbon/web-components 2.43.0 → 2.44.0

package/es-custom/components/dropdown/dropdown.js

@@ -56,6 +56,19 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
          * `true` if there is an AI Label.
          */
         this._hasAILabel = false;
+        /**
+         * Currently slotted AI decorator nodes (`cds-custom-ai-label`/slug) with listeners attached.
+         */
+        this._aiDecoratorNodes = [];
+        /**
+         * Handles interaction on an AI decorator while the menu is open.
+         */
+        this._handleAIDecoratorInteraction = () => {
+            if (!this.open) {
+                return;
+            }
+            this._handleUserInitiatedToggle(false);
+        };
         /**
          * The content of the selected item.
          */
@@ -170,16 +183,20 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
      *   Absense of this argument means clearing selection, which may be handled by a derived class.
      */
     _selectionDidChange(itemToSelect) {
+        const constructor = this.constructor;
         if (itemToSelect) {
             this.value = itemToSelect.value;
             this._activeDescendant = itemToSelect.id;
-            forEach(this.querySelectorAll(this.constructor.selectorItemSelected), (item) => {
+            forEach(this.querySelectorAll(constructor.selectorItemSelected), (item) => {
                 item.selected = false;
                 item.setAttribute('aria-selected', 'false');
             });
             itemToSelect.selected = true;
             itemToSelect.setAttribute('aria-selected', 'true');
-            this._handleUserInitiatedToggle(false);
+            this._updateSelectedNextSibling(itemToSelect);
+        }
+        else {
+            this._updateSelectedNextSibling();
         }
     }
     /**
@@ -193,7 +210,21 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
         }
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
         if (this.shadowRoot.contains(event.target)) {
-            this._handleUserInitiatedToggle();
+            const opening = !this.open;
+            const constructor = this.constructor;
+            const selectedItem = this.querySelector(constructor.selectorItemSelected);
+            if (opening) {
+                const shouldFocusMenu = Boolean(selectedItem);
+                this._handleUserInitiatedToggle(true, {
+                    focusMenu: shouldFocusMenu,
+                    highlightSelectedOnOpen: shouldFocusMenu,
+                });
+            }
+            else {
+                this._handleUserInitiatedToggle(false, {
+                    restoreTriggerFocus: true,
+                });
+            }
         }
         else {
             const item = event.target.closest(this.constructor.selectorItem);
@@ -206,56 +237,229 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
      * Handler for the `keydown` event on the top-level element in the shadow DOM.
      */
     _handleKeydownInner(event) {
+        var _a;
+        if (this._handleMenuInputKeydown(event)) {
+            return;
+        }
         const { key } = event;
         const action = this.constructor.getAction(key);
         if (!this.open) {
             switch (action) {
-                case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:
-                    this._handleUserInitiatedToggle(true);
-                    // If this menu gets open with an arrow key, reset the highlight
-                    this._clearHighlight();
+                case DROPDOWN_KEYBOARD_ACTION.NAVIGATING: {
+                    const shouldKeepInputFocus = this._shouldRetainMenuInputFocus(event);
+                    const menuInputNode = this._menuInputNode;
+                    if (this.readOnly) {
+                        event.preventDefault();
+                        return;
+                    }
+                    const direction = NAVIGATION_DIRECTION[key];
+                    event.preventDefault();
+                    if (direction === -1) {
+                        break;
+                    }
+                    const constructor = this.constructor;
+                    const selectedItem = this.querySelector(constructor.selectorItemSelected);
+                    const shouldHighlightSelected = Boolean(selectedItem);
+                    this._handleUserInitiatedToggle(true, {
+                        focusMenu: false,
+                        highlightSelectedOnOpen: shouldHighlightSelected,
+                    });
+                    this.updateComplete.then(() => {
+                        var _a;
+                        const constructor = this.constructor;
+                        const items = this.querySelectorAll(constructor.selectorItem);
+                        if (items.length > 0) {
+                            const selectedItem = this.querySelector(constructor.selectorItemSelected);
+                            const firstEnabledItem = Array.from(items).find((item) => !item.hasAttribute('disabled'));
+                            const initialItem = selectedItem && !selectedItem.hasAttribute('disabled')
+                                ? selectedItem
+                                : (firstEnabledItem !== null && firstEnabledItem !== void 0 ? firstEnabledItem : null);
+                            if (initialItem) {
+                                this._setHighlightedItem(initialItem, { scrollIntoView: true });
+                            }
+                            else {
+                                this._clearHighlight();
+                            }
+                            const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('menu-body');
+                            if (shouldKeepInputFocus && menuInputNode) {
+                                menuInputNode.focus({ preventScroll: true });
+                            }
+                            else if (menu) {
+                                menu.focus();
+                            }
+                        }
+                    });
                     break;
+                }
             }
         }
         else {
             switch (action) {
                 case DROPDOWN_KEYBOARD_ACTION.CLOSING:
-                    this._handleUserInitiatedToggle(false);
+                    this._handleUserInitiatedToggle(false, {
+                        restoreTriggerFocus: true,
+                    });
                     break;
-                case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:
+                case DROPDOWN_KEYBOARD_ACTION.NAVIGATING: {
                     event.preventDefault();
+                    const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('menu-body');
+                    const menuInputNode = this._menuInputNode;
+                    const shouldKeepInputFocus = this._shouldRetainMenuInputFocus(event);
+                    if (shouldKeepInputFocus && menuInputNode) {
+                        menuInputNode.focus({ preventScroll: true });
+                    }
+                    else if (menu) {
+                        menu.focus();
+                    }
                     this._navigate(NAVIGATION_DIRECTION[key]);
                     break;
+                }
+            }
+        }
+    }
+    _handleMenuInputKeydown(event) {
+        if (event.defaultPrevented ||
+            !this._supportsMenuInputFiltering ||
+            !this._menuInputNode) {
+            return false;
+        }
+        const input = this._menuInputNode;
+        if (!input) {
+            return false;
+        }
+        const isInputTarget = event.target === input;
+        const hasFilterValue = Boolean(input.value || this.value);
+        if (event.key === 'Escape' &&
+            hasFilterValue &&
+            this._shouldClearMenuInputOnEscape({
+                event,
+                menuOpen: this.open,
+                isInputTarget,
+            })) {
+            event.preventDefault();
+            this._clearMenuInputFiltering();
+            return true;
+        }
+        if (!this.open || isInputTarget) {
+            return false;
+        }
+        if (this._shouldForwardKeyToMenuInput(event)) {
+            event.preventDefault();
+            this._forwardKeyToMenuInput(event, input);
+            return true;
+        }
+        return false;
+    }
+    _shouldClearMenuInputOnEscape({ menuOpen, }) {
+        return menuOpen;
+    }
+    get _supportsMenuInputFiltering() {
+        return false;
+    }
+    get _menuInputNode() {
+        return null;
+    }
+    _clearMenuInputFiltering() { }
+    _shouldForwardKeyToMenuInput(event) {
+        if (event.altKey || event.metaKey || event.ctrlKey) {
+            return false;
+        }
+        const { key } = event;
+        if (key === 'Backspace' || key === 'Delete') {
+            return true;
+        }
+        return key.length === 1;
+    }
+    _forwardKeyToMenuInput(event, input) {
+        var _a, _b;
+        input.focus({ preventScroll: true });
+        const key = event.key;
+        const selectionStart = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : input.value.length;
+        const selectionEnd = (_b = input.selectionEnd) !== null && _b !== void 0 ? _b : input.value.length;
+        if (key === 'Backspace') {
+            if (selectionStart === 0 && selectionEnd === 0) {
+                return;
             }
+            const start = selectionStart === selectionEnd
+                ? Math.max(0, selectionStart - 1)
+                : selectionStart;
+            input.setRangeText('', start, selectionEnd, 'end');
+        }
+        else if (key === 'Delete') {
+            if (selectionStart === input.value.length &&
+                selectionStart === selectionEnd) {
+                return;
+            }
+            const end = selectionStart === selectionEnd
+                ? Math.min(input.value.length, selectionEnd + 1)
+                : selectionEnd;
+            input.setRangeText('', selectionStart, end, 'end');
+        }
+        else if (key.length === 1) {
+            input.setRangeText(key, selectionStart, selectionEnd, 'end');
         }
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+    }
+    _shouldRetainMenuInputFocus(event) {
+        if (!this._supportsMenuInputFiltering || !this._menuInputNode) {
+            return false;
+        }
+        if (event.target === this._menuInputNode) {
+            return true;
+        }
+        const path = typeof event.composedPath === 'function' ? event.composedPath() : [];
+        return path.includes(this._menuInputNode);
     }
     /**
-     * Handler for the `keypress` event on the top-level element in the shadow DOM.
+     * Handles keypress events (Space, Enter)
      */
     _handleKeypressInner(event) {
         const { key } = event;
         const action = this.constructor.getAction(key);
+        // When closed
         if (!this.open) {
+            if (this.readOnly && action === DROPDOWN_KEYBOARD_ACTION.TRIGGERING) {
+                if (key === ' ' || key === 'Space') {
+                    event.preventDefault();
+                }
+                return;
+            }
             switch (action) {
-                case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
-                    this._handleUserInitiatedToggle(true);
+                case DROPDOWN_KEYBOARD_ACTION.TRIGGERING: {
+                    if (key === ' ' || key === 'Space') {
+                        event.preventDefault();
+                    }
+                    const constructor = this.constructor;
+                    const selectedItem = this.querySelector(constructor.selectorItemSelected);
+                    const shouldFocusMenu = Boolean(selectedItem);
+                    this._handleUserInitiatedToggle(true, {
+                        focusMenu: shouldFocusMenu,
+                        highlightSelectedOnOpen: shouldFocusMenu,
+                    });
                     break;
+                }
             }
         }
         else {
+            // When open
             switch (action) {
-                case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
-                    {
-                        const constructor = this.constructor;
-                        const highlightedItem = this.querySelector(constructor.selectorItemHighlighted);
-                        if (highlightedItem) {
-                            this._handleUserInitiatedSelectItem(highlightedItem);
-                        }
-                        else {
-                            this._handleUserInitiatedToggle(false);
-                        }
+                case DROPDOWN_KEYBOARD_ACTION.TRIGGERING: {
+                    const constructor = this.constructor;
+                    const selectedItem = this.querySelector(constructor.selectorItemSelected);
+                    const highlightedItem = this.querySelector(constructor.selectorItemHighlighted);
+                    if (highlightedItem) {
+                        this._handleUserInitiatedSelectItem(highlightedItem);
+                    }
+                    else if (selectedItem) {
+                        this._handleUserInitiatedSelectItem(selectedItem);
+                    }
+                    else {
+                        this._handleUserInitiatedToggle(false, {
+                            restoreTriggerFocus: true,
+                        });
                     }
                     break;
+                }
             }
         }
     }
@@ -264,6 +468,41 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
      *
      * @param event The event.
      */
+    _handleMouseoverInner(event) {
+        if (!this.open) {
+            return;
+        }
+        const item = this._getDropdownItemFromEvent(event);
+        if (!item) {
+            return;
+        }
+        if (item.hasAttribute('disabled')) {
+            this._clearHighlight();
+            return;
+        }
+        this._setHighlightedItem(item);
+    }
+    _handleMouseleaveInner(event) {
+        var _a, _b, _c;
+        if (!this.open) {
+            return;
+        }
+        const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('menu-body');
+        const relatedTarget = event.relatedTarget;
+        if (menu && relatedTarget && menu.contains(relatedTarget)) {
+            return;
+        }
+        const shadowActiveElement = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement;
+        if (menu && shadowActiveElement && menu.contains(shadowActiveElement)) {
+            return;
+        }
+        if (this._supportsMenuInputFiltering &&
+            this._menuInputNode &&
+            ((_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement) === this._menuInputNode) {
+            return;
+        }
+        this._clearHighlight();
+    }
     _handleFocusOut(event) {
         if (!this.contains(event.relatedTarget)) {
             this._handleUserInitiatedToggle(false);
@@ -285,17 +524,36 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
      * Handles `slotchange` event.
      */
     _handleAILabelSlotChange({ target }) {
-        const hasContent = target
+        var _a;
+        const decoratorNodes = target
             .assignedNodes()
             .filter((elem) => elem.matches !== undefined
             ? elem.matches(this.constructor.aiLabelItem) ||
                 // remove reference to slug in v12
                 elem.matches(this.constructor.slugItem)
             : false);
-        this._hasAILabel = Boolean(hasContent);
-        hasContent[0].setAttribute('size', 'mini');
+        const decoratorElements = decoratorNodes.filter((node) => node instanceof HTMLElement);
+        this._updateAIDecoratorListeners(decoratorElements);
+        this._hasAILabel = Boolean(decoratorElements.length);
+        (_a = decoratorElements[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('size', 'mini');
         this.requestUpdate();
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._updateAIDecoratorListeners([]);
+    }
+    /**
+     * Updates listeners for AI decorator nodes to ensure only one menu stays open.
+     */
+    _updateAIDecoratorListeners(nodes) {
+        this._aiDecoratorNodes.forEach((node) => {
+            node.removeEventListener('click', this._handleAIDecoratorInteraction);
+        });
+        this._aiDecoratorNodes = nodes;
+        this._aiDecoratorNodes.forEach((node) => {
+            node.addEventListener('click', this._handleAIDecoratorInteraction);
+        });
+    }
     /**
      * Handles user-initiated selection of a dropdown item.
      *
@@ -305,6 +563,7 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
         if (item === null || item === void 0 ? void 0 : item.hasAttribute('disabled')) {
             return;
         }
+        const shouldClose = this._shouldCloseAfterSelection(item);
         if (this._selectionShouldChange(item)) {
             const init = {
                 bubbles: true,
@@ -319,15 +578,31 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
                 this._selectionDidChange(item);
                 const afterSelectEvent = new CustomEvent(constructor.eventSelect, init);
                 this.dispatchEvent(afterSelectEvent);
+                if (shouldClose) {
+                    this._handleUserInitiatedToggle(false, {
+                        restoreTriggerFocus: true,
+                    });
+                }
             }
         }
+        else if (item && shouldClose) {
+            this._handleUserInitiatedToggle(false, {
+                restoreTriggerFocus: true,
+            });
+        }
+    }
+    // Default dropdowns close after user selection.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- https://github.com/carbon-design-system/carbon/issues/20452
+    _shouldCloseAfterSelection(_item) {
+        return true;
     }
     /**
      * Handles user-initiated toggling the open state.
      *
      * @param [force] If specified, forces the open state to the given one.
      */
-    _handleUserInitiatedToggle(force = !this.open) {
+    _handleUserInitiatedToggle(force = !this.open, { restoreTriggerFocus = false, focusMenu = true, highlightSelectedOnOpen = false, } = {}) {
+        var _a;
         const { eventBeforeToggle, eventToggle } = this
             .constructor;
         const { disabled } = this;
@@ -342,11 +617,37 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
         if (!disabled) {
             if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {
                 this.open = force;
-                if (!this.open) {
-                    forEach(this.querySelectorAll(this.constructor.selectorItemHighlighted), (item) => {
-                        item.highlighted = false;
+                if (this.open) {
+                    const activeElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement;
+                    const preserveFocusTarget = activeElement instanceof HTMLInputElement ? activeElement : null;
+                    this.updateComplete.then(() => {
+                        var _a, _b;
+                        if (preserveFocusTarget) {
+                            preserveFocusTarget.focus();
+                        }
+                        else if (focusMenu) {
+                            const menu = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('menu-body');
+                            menu === null || menu === void 0 ? void 0 : menu.focus();
+                        }
+                        else if (this._shouldTriggerBeFocusable) {
+                            const trigger = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('trigger-button');
+                            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+                        }
+                        if (highlightSelectedOnOpen) {
+                            this._highlightSelectedItem();
+                        }
+                    });
+                }
+                else if (restoreTriggerFocus && this._shouldTriggerBeFocusable) {
+                    this.updateComplete.then(() => {
+                        var _a;
+                        const trigger = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('trigger-button');
+                        trigger === null || trigger === void 0 ? void 0 : trigger.focus();
                     });
                 }
+                if (!this.open) {
+                    this._clearHighlight();
+                }
                 this.requestUpdate();
                 this.dispatchEvent(new CustomEvent(eventToggle, init));
             }
@@ -356,44 +657,106 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
      * Clears the selection of dropdown items.
      */
     _clearHighlight() {
-        forEach(this.querySelectorAll(this.constructor.selectorItem), (item) => {
-            item.highlighted = false;
+        this._setHighlightedItem();
+    }
+    _getDropdownItemFromEvent(event) {
+        const constructor = this.constructor;
+        const selector = constructor.selectorItem;
+        const path = event.composedPath();
+        for (const node of path) {
+            if (node instanceof Element &&
+                typeof node.matches === 'function' &&
+                node.matches(selector)) {
+                return node;
+            }
+        }
+        return null;
+    }
+    _setHighlightedItem(item, { scrollIntoView = false } = {}) {
+        const constructor = this.constructor;
+        const items = this.querySelectorAll(constructor.selectorItem);
+        const target = item && !item.hasAttribute('disabled') ? item : null;
+        forEach(items, (listItem) => {
+            const dropdownItem = listItem;
+            dropdownItem.highlighted = dropdownItem === target;
+            dropdownItem.removeAttribute('highlighted-next-sibling');
         });
+        if (target) {
+            const nextSibling = this._getNextDropdownItem(target);
+            if (nextSibling) {
+                nextSibling.setAttribute('highlighted-next-sibling', '');
+            }
+            const itemId = target.id;
+            if (itemId) {
+                this._activeDescendant = itemId;
+            }
+            if (scrollIntoView) {
+                target.scrollIntoView({ block: 'nearest' });
+            }
+        }
+        else {
+            this._activeDescendant = undefined;
+        }
+    }
+    _getNextDropdownItem(item) {
+        const constructor = this.constructor;
+        const selector = constructor.selectorItem;
+        let next = item.nextElementSibling;
+        while (next) {
+            if (typeof next.matches === 'function' && next.matches(selector)) {
+                return next;
+            }
+            next = next.nextElementSibling;
+        }
+        return null;
+    }
+    _updateSelectedNextSibling(item) {
+        const constructor = this.constructor;
+        forEach(this.querySelectorAll(constructor.selectorItem), (listItem) => {
+            listItem.removeAttribute('selected-next-sibling');
+        });
+        if (item) {
+            const nextSibling = this._getNextDropdownItem(item);
+            if (nextSibling) {
+                nextSibling.setAttribute('selected-next-sibling', '');
+            }
+        }
+    }
+    _highlightSelectedItem() {
+        const constructor = this.constructor;
+        const selectedItem = this.querySelector(constructor.selectorItemSelected);
+        if (selectedItem && !selectedItem.hasAttribute('disabled')) {
+            this._setHighlightedItem(selectedItem, { scrollIntoView: true });
+        }
+        else {
+            this._clearHighlight();
+        }
     }
-    /**
-     * Navigate through dropdown items.
-     *
-     * @param direction `-1` to navigate backward, `1` to navigate forward.
-     */
     _navigate(direction) {
         var _a;
         const constructor = this.constructor;
         const items = this.querySelectorAll(constructor.selectorItem);
+        if (!items.length) {
+            return;
+        }
         const highlightedItem = this.querySelector(constructor.selectorItemHighlighted);
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
         const highlightedIndex = indexOf(items, highlightedItem);
-        let nextIndex = highlightedIndex + direction;
-        if ((_a = items[nextIndex]) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')) {
+        let nextIndex = highlightedIndex === -1
+            ? direction > 0
+                ? 0
+                : items.length - 1
+            : highlightedIndex + direction;
+        while (nextIndex >= 0 &&
+            nextIndex < items.length &&
+            ((_a = items[nextIndex]) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled'))) {
             nextIndex += direction;
         }
-        if (nextIndex < 0) {
-            nextIndex = items.length - 1;
-        }
-        if (nextIndex >= items.length) {
-            nextIndex = 0;
+        if (nextIndex < 0 || nextIndex >= items.length) {
+            return;
         }
-        forEach(items, (item, i) => {
-            item.highlighted = i === nextIndex;
-        });
         const nextItem = items[nextIndex];
-        // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.
-        // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.
-        // IE falls back to the old behavior.
-        nextItem.scrollIntoView({ block: 'nearest' });
-        const nextItemId = nextItem.id;
-        if (nextItemId) {
-            this._activeDescendant = nextItemId;
-        }
+        this._setHighlightedItem(nextItem, { scrollIntoView: true });
     }
     /**
      * @returns The content preceding the trigger button.
@@ -470,15 +833,20 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
                 elem.size = this.size;
             });
         }
-        if (changedProperties.has('disabled') && this.disabled) {
+        if (changedProperties.has('disabled')) {
             const { disabled } = this;
             // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers
             forEach(this.querySelectorAll(selectorItem), (elem) => {
+                const item = elem;
                 if (disabled) {
-                    elem.disabled = disabled;
+                    if (!item.disabled) {
+                        item.setAttribute('parent-disabled', '');
+                    }
+                    item.disabled = true;
                 }
-                else {
-                    elem.removeAttribute('disabled');
+                else if (item.hasAttribute('parent-disabled')) {
+                    item.removeAttribute('parent-disabled');
+                    item.disabled = false;
                 }
             });
         }
@@ -489,16 +857,17 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
                 elem.selected =
                     elem.value === this.value;
             });
-            const item = find(this.querySelectorAll(selectorItem), (elem) => elem.value === this.value);
-            if (item) {
+            const selectedItem = find(this.querySelectorAll(selectorItem), (elem) => elem.value === this.value);
+            if (selectedItem) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452
                 const range = this.ownerDocument.createRange();
-                range.selectNodeContents(item);
+                range.selectNodeContents(selectedItem);
                 this._selectedItemContent = range.cloneContents();
             }
             else {
                 this._selectedItemContent = null;
             }
+            this._updateSelectedNextSibling(selectedItem);
         }
         return true;
     }
@@ -553,7 +922,7 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
     }
     render() {
         var _a;
-        const { ariaLabel, _classes: classes, helperText, invalidText, open, toggleLabelClosed, toggleLabelOpen, type, warn, warnText, _activeDescendant: activeDescendant, _shouldTriggerBeFocusable: shouldTriggerBeFocusable, _handleClickInner: handleClickInner, _handleKeydownInner: handleKeydownInner, _handleKeypressInner: handleKeypressInner, _handleSlotchangeHelperText: handleSlotchangeHelperText, _handleAILabelSlotChange: handleAILabelSlotChange, _slotHelperTextNode: slotHelperTextNode, } = this;
+        const { ariaLabel, _classes: classes, helperText, invalidText, open, toggleLabelClosed, toggleLabelOpen, type, warn, warnText, _activeDescendant: activeDescendant, _shouldTriggerBeFocusable: shouldTriggerBeFocusable, _handleClickInner: handleClickInner, _handleKeydownInner: handleKeydownInner, _handleKeypressInner: handleKeypressInner, _handleMouseleaveInner: handleMouseleaveInner, _handleMouseoverInner: handleMouseoverInner, _handleSlotchangeHelperText: handleSlotchangeHelperText, _handleAILabelSlotChange: handleAILabelSlotChange, _slotHelperTextNode: slotHelperTextNode, } = this;
         const inline = type === DROPDOWN_TYPE.INLINE;
         const normalizedProps = this._normalizedProps;
         let activeDescendantFallback;
@@ -601,7 +970,9 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
         class="${prefix}--list-box__menu"
         role="listbox"
         tabindex="-1"
-        ?hidden=${!open}>
+        ?hidden=${!open}
+        @mouseover=${handleMouseoverInner}
+        @mouseleave=${handleMouseleaveInner}>
         <slot></slot>
       </div>
     `;
@@ -613,12 +984,14 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
         @click=${handleClickInner}
         @keydown=${handleKeydownInner}
         @keypress=${handleKeypressInner}>
+        ${validityIcon}${warningIcon}
         <div
           id="${ifDefined(!shouldTriggerBeFocusable ? undefined : 'trigger-button')}"
           class="${prefix}--list-box__field"
           part="trigger-button"
           tabindex="${ifDefined(!shouldTriggerBeFocusable ? undefined : '0')}"
           role="${ifDefined(!shouldTriggerBeFocusable ? undefined : 'combobox')}"
+          aria-label="${ifDefined(ariaLabel ? ariaLabel : undefined)}"
           aria-labelledby="${ifDefined(!shouldTriggerBeFocusable ? undefined : 'dropdown-label')}"
           aria-expanded="${ifDefined(!shouldTriggerBeFocusable ? undefined : String(open))}"
           aria-haspopup="${ifDefined(!shouldTriggerBeFocusable ? undefined : 'listbox')}"
@@ -628,7 +1001,7 @@ let CDSDropdown = class CDSDropdown extends ValidityMixin(HostListenerMixin(Form
             : open
                 ? (activeDescendant !== null && activeDescendant !== void 0 ? activeDescendant : activeDescendantFallback)
                 : '')}">
-          ${this._renderPrecedingLabel()}${this._renderLabel()}${validityIcon}${warningIcon}${this._renderFollowingLabel()}
+          ${this._renderPrecedingLabel()}${this._renderLabel()}${this._renderFollowingLabel()}
           <div id="trigger-caret" class="${iconContainerClasses}">
             ${iconLoader(ChevronDown16, { 'aria-label': toggleLabel })}
           </div>
@@ -746,7 +1119,7 @@ __decorate([
     // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
 ], CDSDropdown.prototype, "_handleFocusOut", null);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'aria-label' })
+    property({ type: String, attribute: 'aria-label' })
 ], CDSDropdown.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: String, reflect: true })