Revert "fix(dropdown): align styles and behavior with React parity (#20863)" (#21037)

This reverts commit 18b87e5.

Author: riddhybansal

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2024
  *
  * 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,18 +55,6 @@ 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.
    */
@@ -187,24 +175,6 @@ 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;
@@ -311,6 +281,7 @@ class CDSComboBox extends CDSDropdown {
       itemToSelect.selected = true;
       itemToSelect.setAttribute('aria-selected', 'true');
     }
+    this._handleUserInitiatedToggle(false);
   }
 
   protected _renderLabel(): TemplateResult {

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

@@ -540,11 +540,10 @@ describe('cds-dropdown-skeleton', function () {
         html`<cds-dropdown-skeleton></cds-dropdown-skeleton>`
       );
       expect(el).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;
+      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;
     });
 
     it('should respect size attribute', async () => {

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

@@ -1,15 +1,12 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2023
  *
  * 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';
 
@@ -18,31 +15,14 @@ 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`
-      ${!hideLabel
-        ? html`<span class="${prefix}--label ${prefix}--skeleton"></span>`
-        : null}
-      <div class=${classes}></div>
+      <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>
     `;
   }