Skip to content

[WC-3015] Improve dropdown filter#1732

Merged
r0b1n merged 25 commits into
mainfrom
improve-dropdown-filter
Jul 31, 2025
Merged

[WC-3015] Improve dropdown filter#1732
r0b1n merged 25 commits into
mainfrom
improve-dropdown-filter

Conversation

@r0b1n

@r0b1n r0b1n commented Jun 30, 2025 •
edited
Loading

Copy link
Copy Markdown
Collaborator

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.

@r0b1n
r0b1n requested a review from a team as a code owner June 30, 2025 16:05
iobuhov
iobuhov reviewed Jul 1, 2025
View reviewed changes
Comment thread packages/shared/widget-plugin-dropdown-filter/src/controls/select/Select.tsx
@r0b1n
r0b1n force-pushed the improve-dropdown-filter branch 3 times, most recently from 5ceb469 to 0cd24af Compare July 2, 2025 09:21
@r0b1n r0b1n changed the title [WC-315] Improve dropdown filter [WC-3015] Improve dropdown filter Jul 2, 2025
@r0b1n
r0b1n force-pushed the improve-dropdown-filter branch 2 times, most recently from 4b3d234 to d92da8a Compare July 3, 2025 12:48
gjulivan
gjulivan previously approved these changes Jul 3, 2025
View reviewed changes
iobuhov
iobuhov reviewed Jul 4, 2025
View reviewed changes
Comment thread packages/shared/widget-plugin-dropdown-filter/src/controls/combobox/Combobox.tsx Outdated
@r0b1n
r0b1n force-pushed the improve-dropdown-filter branch from d92da8a to 7b63b01 Compare July 4, 2025 13:25
iobuhov
iobuhov previously approved these changes Jul 7, 2025
View reviewed changes
@gjulivan
gjulivan force-pushed the improve-dropdown-filter branch from 7b63b01 to 6cf7105 Compare July 17, 2025 08:38
gjulivan
gjulivan previously approved these changes Jul 17, 2025
View reviewed changes
@gjulivan
gjulivan force-pushed the improve-dropdown-filter branch from 6cf7105 to 561ff63 Compare July 17, 2025 14:00
@r0b1n
r0b1n force-pushed the improve-dropdown-filter branch from 561ff63 to 33c6447 Compare July 29, 2025 09:27
r0b1n added 7 commits July 29, 2025 14:57
@r0b1n
chore: fix styling
c37682e 
separator line
margin between tags
@r0b1n
chore: remove unused separator, it is done via css
03e37b7 
also use clear button again
@r0b1n
chore: multi select never has empty item
14bb6a8
@r0b1n
fix: don't focus on input when clear button clicked
c449b0a 
this is how combobox works
@r0b1n
fix: add focus highlight for clear button
1445e26
@r0b1n
chore: restructure select html layout, don't use button, move toggle …
ee9f4ac 
…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.
@r0b1n
chore: improve selected tag visibility
4fcf851
r0b1n added 13 commits July 29, 2025 14:57
@r0b1n
chore: do not close popup if already open and input is clicked
cc9a90f
@r0b1n
chore: activate widget on clicking on the whole widget area
5b33e29
@r0b1n
chore: focus on tags when left arrow of backspace is clicked with cur…
28b31fe 
…sor position 0
@r0b1n
chore: shrink input when there is no focus, prevents empty line when …
abf0ac9 
…not focused
@r0b1n
feat: rework captions
f3215b7 
- introduce new options to configure placeholder text and empty caption
- show placeholder when widget is not open and empty
- split emptySelectionCaption and emptyOptionCaption
@r0b1n
fix: don't close popup on click
ddbbc5b
@r0b1n
fix: update e2e tests
96158ad
@r0b1n
fix: aria label issue for dropdown selectors
83eac1a
@r0b1n
chore: add release notes and bump version
17b182c
@r0b1n
fix: focusing issues after clear
4c46ef0
@r0b1n
chore: fix screenshots
f2406f3
@r0b1n
fix: don't select item on blur, allow down arrow key on clear button
d19bd5e
@r0b1n
chore: more e2e fixes
8b37ec3
@r0b1n
r0b1n force-pushed the improve-dropdown-filter branch from 9a7901e to 8b37ec3 Compare July 29, 2025 12:57
@r0b1n
r0b1n merged commit 965fb7a into main Jul 31, 2025
14 checks passed
@r0b1n
r0b1n deleted the improve-dropdown-filter branch July 31, 2025 07:52
@r0b1n r0b1n mentioned this pull request Aug 1, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@HedwigAR HedwigAR HedwigAR left review comments
@gjulivan gjulivan gjulivan approved these changes
@leonardomendix leonardomendix leonardomendix approved these changes
@iobuhov iobuhov iobuhov left review comments

Assignees

No one assigned

Labels

data-widgets shared

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@r0b1n @gjulivan @HedwigAR @iobuhov @leonardomendix