Dropdown improvements #932

clintcs · 2025-06-06T17:46:10Z

🚀 Description

Another round of Dropdown bugfixes before I move on to generalizing Menu:

Minor

Dropdown Option's selected attribute is no longer reflected to match native and to resolve a bug when reset() is called on its form. This may be a breaking change for you if you have a mutation observer or CSS selector that targets selected.

Patch

Dropdown

The tag overflow button is now updated when a selected Dropdown Option is enabled or disabled.

Dropdown now reverts its value and Dropdown Options revert back to their initial selected state when reset() is called on the form.

Selected Dropdown Options whose value is an empty string now appear as selected.

Only the last selected option is presented to screenreaders as selected when single-select and multiple options are initially selected.

Tags now appear in the order that Dropdown Options are selected by the user.

Removing a tag via Enter no longer submits the form.

Disabled Dropdown Options are now enabled when selected programmatically.

When a Dropdown Option is disabled programmatically and more than one selected Dropdown Option has the same value, Dropdown now only removes the value corresponding to the disabled Dropdown Option from value.

When value is set programmatically, only the first Dropdown Option with a matching value is now selected instead of every Dropdown Option with a matching value.

Dropdown's input field is now populated with the label of the selected Dropdown Option when filterable and multiple is set to false programmatically.

Tab Group

The trailing overflow button is no longer incorrectly enabled in a rare case.

Additionally:

Filled in test and assertion gaps.
Added and improved code comments.

📋 Checklist

I have followed the Contributing Guidelines.
I have added tests to cover new or updated functionality.
I have added or updated Storybook stories.
I have localized new strings.
I have followed the ARIA Authoring Practices Guide or met with the Accessibility Team.
I have included a changeset.
I have scheduled a design review.
I have reviewed the Storybook and Visual Test Report links below.

🔬 Testing

Dropdown Option's `selected` attribute is no longer reflected to match native and to resolve a bug when `reset()` is called on its form

changeset-bot · 2025-06-06T17:46:13Z

🦋 Changeset detected

Latest commit: f6f7fd4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@crowdstrike/glide-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-06-06T17:47:54Z

Storybook

https://glide-core.crowdstrike-ux.workers.dev/dropdown-tag-order

github-actions · 2025-06-06T17:49:57Z

⚠️ Visual Test Report

https://glide-core.crowdstrike-ux.workers.dev/dropdown-tag-order/visual-test-report

clintcs · 2025-06-10T11:49:02Z

src/dropdown.test.forms.multiple.ts


-it('can be reset', async () => {
+it('can be reset after options are selected via click', async () => {


Renamed to accommodate "can be reset after options are selected programmatically" below.

This test was falsely passing before because Dropdown wasn't opened before its options were clicked.

clintcs · 2025-06-10T11:50:34Z

src/dropdown.test.forms.multiple.ts

+  expect(host.value).to.deep.equal(['one', 'two']);
+  expect(tags?.length).to.equal(2);
+  expect(tags?.[0]?.label).to.equal('One');
+  expect(tags?.[1]?.label).to.equal('Two');


Added tag assertions throughout.

clintcs · 2025-06-10T11:52:36Z

src/dropdown.option.ts

@@ -170,9 +170,6 @@ export default class DropdownOption extends LitElement {
      this.#checkboxElementRef.value.checked = isSelected;
    }

-    // Prefixed with "private" because Dropdown uses it internally, to track the set of


This isn't actually how Dropdown uses this event. I started rewriting the comment then realized that it didn't add much given it's only used by one method: #onOptionsSelectedChange().

clintcs · 2025-06-10T11:53:15Z

src/dropdown.test.basics.multiple.ts

@@ -35,12 +35,13 @@ it('is accessible', async () => {
  await expect(host).to.be.accessible();
 });

-it('sets `value` to that of its selected options', async () => {
+it('can have selected options', async () => {


Renamed this test to accommodate more assertions.

clintcs · 2025-06-10T11:56:26Z

src/dropdown.test.basics.multiple.ts

@@ -367,3 +342,56 @@ it('does not include in its `value` disabled options that are selected', async (

  expect(host.value).to.deep.equal([]);
 });
+
+it('only selects the first option with a matching value when multiple options have the same value and `value` is set', async () => {


When value is set programmatically, only the first Dropdown Option with a matching value is now selected instead of every Dropdown Option with a matching value.

clintcs · 2025-06-10T11:57:09Z

src/dropdown.test.basics.single.ts

@@ -12,22 +12,40 @@ it('is accessible ', async () => {
  await expect(host).to.be.accessible();
 });

-it('has a selected option label when an option is initially selected', async () => {
+it('can have a selected option', async () => {


Renamed this test to accommodate more assertions.

clintcs · 2025-06-10T11:58:00Z

src/dropdown.test.forms.multiple.ts

@@ -171,3 +264,33 @@ it('has no `formData` value when an option is selected that has no `value`', asy
  const formData = new FormData(form);
  expect(formData.get('name')).to.be.null;
 });
+
+it('does not submit its form when a tag is removed via Enter', async () => {


Removing a tag via Enter no longer submits the form

clintcs · 2025-06-10T11:58:23Z

src/dropdown.test.forms.single.ts


-it('can be reset', async () => {
+it('can be reset after an option is selected via click', async () => {


Renamed to accommodate "can be reset after an option is selected programmatically" below.

clintcs · 2025-06-10T11:58:34Z

src/dropdown.test.forms.single.ts

+  expect(host.value).to.deep.equal(['one']);
+});
+
+it('can be reset after an option is deselected via click', async () => {


clintcs · 2025-06-10T11:59:37Z

src/dropdown.test.interactions.filterable.ts

@@ -560,7 +560,6 @@ it('does not clear its filter when a tag is removed via Backspace', async () =>
    </glide-core-dropdown>`,
  );

-  await aTimeout(0); // Wait for Floating UI


No need to wait for Floating UI. Awaiting sendKeys() is enough.

clintcs · 2025-06-10T12:01:49Z

src/dropdown.test.interactions.filterable.ts

@@ -782,6 +779,46 @@ it('clears its input field when made multiselect programmatically', async () =>
  expect(input?.value).to.be.empty.string;
 });

+it('updates itself made single-select programmatically and an option is selected', async () => {


Dropdown's input field is now populated with the label of the selected Dropdown Option when filterable and multiple is set to false programmatically.

clintcs · 2025-06-10T12:02:47Z

src/dropdown.test.interactions.filterable.ts

@@ -1960,7 +1997,7 @@ it('shows an ellipsis when the label of its selected option is set programmatica
  option.label = 'x'.repeat(500);
  await host.updateComplete;

-  // Wait for the resize observer to do its thing.
+  // Wait for the Resize Observer to do its thing.


Doesn't make a different to me. Just made it the same as it is everywhere else.

clintcs · 2025-06-10T12:03:33Z