Skip to content

Commit a4172c3

Browse files
authored
Revert "fix(dropdown): align styles and behavior with React parity (#20863)" (#21037)
This reverts commit 18b87e5.
1 parent 18b87e5 commit a4172c3

File tree

9 files changed

+196
-1238
lines changed

9 files changed

+196
-1238
lines changed

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

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2019, 2025
2+
* Copyright IBM Corp. 2019, 2024
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -55,18 +55,6 @@ class CDSComboBox extends CDSDropdown {
5555
@query('input')
5656
private _filterInputNode!: HTMLInputElement;
5757

58-
protected get _supportsMenuInputFiltering() {
59-
return true;
60-
}
61-
62-
protected get _menuInputNode(): HTMLInputElement | null {
63-
return this._filterInputNode ?? null;
64-
}
65-
66-
protected _clearMenuInputFiltering() {
67-
this._handleUserInitiatedClearInput();
68-
}
69-
7058
/**
7159
* The menu containing all selectable items.
7260
*/
@@ -187,24 +175,6 @@ class CDSComboBox extends CDSDropdown {
187175
return firstMatchIndex;
188176
}
189177

190-
protected _handleMouseoverInner(event: MouseEvent) {
191-
const item = this._getDropdownItemFromEvent(event);
192-
if (!item?.hasAttribute('selected')) {
193-
return;
194-
}
195-
196-
super._handleMouseoverInner(event);
197-
}
198-
199-
protected _handleMouseleaveInner(event: MouseEvent) {
200-
const isFiltering = Boolean(this._filterInputNode?.value.length);
201-
if (isFiltering) {
202-
return;
203-
}
204-
205-
super._handleMouseleaveInner(event);
206-
}
207-
208178
protected _scrollItemIntoView(item: HTMLElement) {
209179
if (!this._itemMenu) {
210180
return;
@@ -311,6 +281,7 @@ class CDSComboBox extends CDSDropdown {
311281
itemToSelect.selected = true;
312282
itemToSelect.setAttribute('aria-selected', 'true');
313283
}
284+
this._handleUserInitiatedToggle(false);
314285
}
315286

316287
protected _renderLabel(): TemplateResult {

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -540,11 +540,10 @@ describe('cds-dropdown-skeleton', function () {
540540
html`<cds-dropdown-skeleton></cds-dropdown-skeleton>`
541541
);
542542
expect(el).to.exist;
543-
const skeletonRoot = el.shadowRoot.querySelector('.cds--dropdown');
544-
expect(skeletonRoot).to.exist;
545-
expect(skeletonRoot.classList.contains('cds--skeleton')).to.be.true;
546-
expect(skeletonRoot.classList.contains('cds--list-box--md')).to.be.true;
547-
expect(el.shadowRoot.querySelector('.cds--label.cds--skeleton')).to.exist;
543+
expect(el.shadowRoot.querySelector('.cds--skeleton')).to.exist;
544+
expect(el.shadowRoot.querySelector('.cds--dropdown-v2')).to.exist;
545+
expect(el.shadowRoot.querySelector('.cds--list-box')).to.exist;
546+
expect(el.shadowRoot.querySelector('.cds--form-item')).to.exist;
548547
});
549548

550549
it('should respect size attribute', async () => {

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

Lines changed: 7 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
/**
2-
* Copyright IBM Corp. 2019, 2025
2+
* Copyright IBM Corp. 2019, 2023
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

88
import { LitElement, html } from 'lit';
9-
import { classMap } from 'lit/directives/class-map.js';
10-
import { property } from 'lit/decorators.js';
119
import { prefix } from '../../globals/settings';
12-
import { DROPDOWN_SIZE } from './defs';
1310
import styles from './dropdown.scss?lit';
1411
import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
1512

@@ -18,31 +15,14 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
1815
*/
1916
@customElement(`${prefix}-dropdown-skeleton`)
2017
class CDSDropdownSkeleton extends LitElement {
21-
/**
22-
* Specify whether the label should be hidden, or not.
23-
*/
24-
@property({ type: Boolean, reflect: true, attribute: 'hide-label' })
25-
hideLabel = false;
26-
27-
/**
28-
* Specify the size of the ListBox.
29-
*/
30-
@property({ reflect: true })
31-
size = DROPDOWN_SIZE.MEDIUM;
32-
3318
render() {
34-
const { hideLabel, size } = this;
35-
const classes = classMap({
36-
[`${prefix}--skeleton`]: true,
37-
[`${prefix}--dropdown`]: true,
38-
[`${prefix}--list-box--${size}`]: Boolean(size),
39-
});
40-
4119
return html`
42-
${!hideLabel
43-
? html`<span class="${prefix}--label ${prefix}--skeleton"></span>`
44-
: null}
45-
<div class=${classes}></div>
20+
<div
21+
class="${prefix}--skeleton ${prefix}--dropdown-v2 ${prefix}--list-box ${prefix}--form-item">
22+
<div class="${prefix}--list-box__field">
23+
<span class="${prefix}--list-box__label"></span>
24+
</div>
25+
</div>
4626
`;
4727
}
4828

0 commit comments

Comments
 (0)