feat(dropdown): reintroduce parity changes from reverted PR #20863 (#21048)

* feat(dropdown): reintroduce parity changes from reverted PR #20863

* fix(multi-select): ensure input reflects aria-expanded state

Author: heloiselui

packages/web-components/src/components/combo-box/combo-box.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -55,6 +55,18 @@ class CDSComboBox extends CDSDropdown {
   @query('input')
   private _filterInputNode!: HTMLInputElement;
 
+  protected get _supportsMenuInputFiltering() {
+    return true;
+  }
+
+  protected get _menuInputNode(): HTMLInputElement | null {
+    return this._filterInputNode ?? null;
+  }
+
+  protected _clearMenuInputFiltering() {
+    this._handleUserInitiatedClearInput();
+  }
+
   /**
    * The menu containing all selectable items.
    */
@@ -219,6 +231,24 @@ class CDSComboBox extends CDSDropdown {
     return firstMatchIndex;
   }
 
+  protected _handleMouseoverInner(event: MouseEvent) {
+    const item = this._getDropdownItemFromEvent(event);
+    if (!item?.hasAttribute('selected')) {
+      return;
+    }
+
+    super._handleMouseoverInner(event);
+  }
+
+  protected _handleMouseleaveInner(event: MouseEvent) {
+    const isFiltering = Boolean(this._filterInputNode?.value.length);
+    if (isFiltering) {
+      return;
+    }
+
+    super._handleMouseleaveInner(event);
+  }
+
   protected _scrollItemIntoView(item: HTMLElement) {
     if (!this._itemMenu) {
       return;

packages/web-components/src/components/dropdown/__tests__/dropdown-test.js

@@ -540,10 +540,11 @@ describe('cds-dropdown-skeleton', function () {
         html`<cds-dropdown-skeleton></cds-dropdown-skeleton>`
       );
       expect(el).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--skeleton')).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--dropdown-v2')).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--list-box')).to.exist;
-      expect(el.shadowRoot.querySelector('.cds--form-item')).to.exist;
+      const skeletonRoot = el.shadowRoot.querySelector('.cds--dropdown');
+      expect(skeletonRoot).to.exist;
+      expect(skeletonRoot.classList.contains('cds--skeleton')).to.be.true;
+      expect(skeletonRoot.classList.contains('cds--list-box--md')).to.be.true;
+      expect(el.shadowRoot.querySelector('.cds--label.cds--skeleton')).to.exist;
     });
 
     it('should respect size attribute', async () => {

packages/web-components/src/components/dropdown/dropdown-skeleton.ts

@@ -1,12 +1,15 @@
 /**
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
+import { DROPDOWN_SIZE } from './defs';
 import styles from './dropdown.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
@@ -15,14 +18,31 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
  */
 @customElement(`${prefix}-dropdown-skeleton`)
 class CDSDropdownSkeleton extends LitElement {
+  /**
+   * Specify whether the label should be hidden, or not.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
+  /**
+   * Specify the size of the ListBox.
+   */
+  @property({ reflect: true })
+  size = DROPDOWN_SIZE.MEDIUM;
+
   render() {
+    const { hideLabel, size } = this;
+    const classes = classMap({
+      [`${prefix}--skeleton`]: true,
+      [`${prefix}--dropdown`]: true,
+      [`${prefix}--list-box--${size}`]: Boolean(size),
+    });
+
     return html`
-      <div
-        class="${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item">
-        <div class="${prefix}--list-box__field">
-          <span class="${prefix}--list-box__label"></span>
-        </div>
-      </div>
+      ${!hideLabel
+        ? html`<span class="${prefix}--label ${prefix}--skeleton"></span>`
+        : null}
+      <div class=${classes}></div>
     `;
   }