[WC-3015] Improve dropdown filter #1732

r0b1n · 2025-06-30T16:05:54Z

Pull request type

Bug fix (non-breaking change which fixes an issue)

New feature (non-breaking change which adds functionality)

Breaking change (fix or feature that would cause existing functionality to change)

Description

Various improvements for dropdown widget.

Separate captions for Empty selection, Empty option and Input placeholder. Fully customizable now.
[Tag] Shrink input if not focused (prevents empty line when some items were selected)
[Tag] Fix 🤞 arrow keys and backspace behavior (was not working in some cases)
Clicking whole widget area activates the widget, no dead-zone in the widget at the paddings (previously clicking near the widget border was not opening the widget)
[Tag] Don't close popup if input is clicked while already in focus (this is more user friendly)
[Tag] Add highlight color for tags if selected via mouse clicks (had no visual sign if was focused not with keyboard, but had a border highlight when focused via keyboard, that stayed as is)
Focus highlight for clear button (it had no visual sign it was focused)
Don't focus on input when clear button is clicked. This allows clearing without focusing in the input when widget is not active.
Remove empty item from multiselect, it only makes sense for non-filterable singe select.
Fix clear and arrow buttons separator (it was not in full height)

Breaking change

The input text are now changed and it will affect users, they have to revisit and configure text to their needs.

packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx

iobuhov · 2025-07-04T09:16:01Z

packages/shared/widget-plugin-dropdown-filter/src/controls/tag-picker/TagPicker.tsx

            <button className={cls.toggle} {...getToggleButtonProps({ "aria-label": "Show options" })}>
                <Arrow className={cls.stateIcon} />
            </button>
            <OptionsWrapper
                cls={cls}
+                label={inputLabel}


Why do we set the input label on the Options menu? This seems very counterintuitive.

This is the logic behind downshiftjs, it was putting aria-labeledby on menu as well. And because we didn't render label it was a dangling property, pointing to a non-existing element by id. So I replaced it with explicit aria-label, which should have the same effect downshiftjs intended to have. Check this line to see how snapshot changed.

Other option is to explicitly unset this aria-labeledby that is coming from getMenuProps, so it won't have a label, but I thought that downshiftjs has a good reason to label menu as well.

Yes, since we're using it here without the label provided by downshift I would also say this makes more sense. We could also consider having the label from downshift there but invisible? But to me this aria-label approach makes more sense. Let me know what you think @iobuhov

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml

packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx

separator line margin between tags

also use clear button again

this is how combobox works

…button up the html tree - makes it easier to open the popup, previously it was not opening if clicked inside, but next to the border. - fixes issue with nested button tags.

…sor position 0

…not focused

- introduce new options to configure placeholder text and empty caption - show placeholder when widget is not open and empty - split emptySelectionCaption and emptyOptionCaption

r0b1n requested a review from a team as a code owner June 30, 2025 16:05

github-actions bot added data-widgets shared labels Jun 30, 2025

iobuhov reviewed Jul 1, 2025

View reviewed changes

packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx Show resolved Hide resolved

r0b1n force-pushed the improve-dropdown-filter branch 3 times, most recently from 5ceb469 to 0cd24af Compare July 2, 2025 09:21

r0b1n changed the title ~~[WC-315] Improve dropdown filter~~ [WC-3015] Improve dropdown filter Jul 2, 2025

r0b1n force-pushed the improve-dropdown-filter branch 2 times, most recently from 4b3d234 to d92da8a Compare July 3, 2025 12:48

gjulivan previously approved these changes Jul 3, 2025

View reviewed changes

iobuhov reviewed Jul 4, 2025

View reviewed changes

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.xml Show resolved Hide resolved

iobuhov reviewed Jul 4, 2025

View reviewed changes

packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx Outdated Show resolved Hide resolved

r0b1n added 16 commits July 4, 2025 15:25

chore: fix styling

370f23c

separator line margin between tags

chore: remove unused separator, it is done via css

7fee954

also use clear button again

chore: multi select never has empty item

782bc46

fix: don't focus on input when clear button clicked

18f34cb

this is how combobox works

fix: add focus highlight for clear button

2a88697

chore: restructure select html layout, don't use button, move toggle …

0277428

…button up the html tree - makes it easier to open the popup, previously it was not opening if clicked inside, but next to the border. - fixes issue with nested button tags.

chore: improve selected tag visibility

e3600e3

chore: do not close popup if already open and input is clicked

35fc33e

chore: activate widget on clicking on the whole widget area

02e7c73

chore: focus on tags when left arrow of backspace is clicked with cur…

a76d928

…sor position 0

chore: shrink input when there is no focus, prevents empty line when …

187ab9f

…not focused

feat: rework captions

1cdc4d8

- introduce new options to configure placeholder text and empty caption - show placeholder when widget is not open and empty - split emptySelectionCaption and emptyOptionCaption

fix: don't close popup on click

acb6087

fix: update e2e tests

ae802e5

fix: aria label issue for dropdown selectors

6d694c5

chore: add release notes and bump version

357e1d2

fix: focusing issues after clear

7b63b01

r0b1n dismissed gjulivan’s stale review via 7b63b01 July 4, 2025 13:25

r0b1n force-pushed the improve-dropdown-filter branch from d92da8a to 7b63b01 Compare July 4, 2025 13:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[WC-3015] Improve dropdown filter #1732

[WC-3015] Improve dropdown filter #1732

Uh oh!

r0b1n commented Jun 30, 2025 •

edited

Loading

Uh oh!

Uh oh!

iobuhov Jul 4, 2025

Uh oh!

r0b1n Jul 4, 2025 •

edited

Loading

Uh oh!

HedwigAR Jul 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

[WC-3015] Improve dropdown filter #1732

Are you sure you want to change the base?

[WC-3015] Improve dropdown filter #1732

Uh oh!

Conversation

r0b1n commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request type

Description

Breaking change

Uh oh!

Uh oh!

iobuhov Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

r0b1n Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HedwigAR Jul 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

r0b1n commented Jun 30, 2025 •

edited

Loading

r0b1n Jul 4, 2025 •

edited

Loading