Skip to content

[WC-3015] Improve dropdown filter #1732

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

[WC-3015] Improve dropdown filter #1732

wants to merge 17 commits into from

Conversation

r0b1n
Copy link
Collaborator

@r0b1n r0b1n commented Jun 30, 2025 •
edited
Loading

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
@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
r0b1n added 16 commits July 4, 2025 15:25
@r0b1n
chore: fix styling
370f23c 
separator line
margin between tags
@r0b1n
chore: remove unused separator, it is done via css
7fee954 
also use clear button again
@r0b1n
chore: multi select never has empty item
782bc46
@r0b1n
fix: don't focus on input when clear button clicked
18f34cb 
this is how combobox works
@r0b1n
fix: add focus highlight for clear button
2a88697
@r0b1n
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.
@r0b1n
chore: improve selected tag visibility
e3600e3
@r0b1n
chore: do not close popup if already open and input is clicked
35fc33e
@r0b1n
chore: activate widget on clicking on the whole widget area
02e7c73
@r0b1n
chore: focus on tags when left arrow of backspace is clicked with cur…
a76d928 
…sor position 0
@r0b1n
chore: shrink input when there is no focus, prevents empty line when …
187ab9f 
…not focused
@r0b1n
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
@r0b1n
fix: don't close popup on click
acb6087
@r0b1n
fix: update e2e tests
ae802e5
@r0b1n
fix: aria label issue for dropdown selectors
6d694c5
@r0b1n
chore: add release notes and bump version
357e1d2
@r0b1n r0b1n force-pushed the improve-dropdown-filter branch from d92da8a to 7b63b01 Compare July 4, 2025 13:25
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

@iobuhov iobuhov iobuhov approved these changes

@gjulivan gjulivan gjulivan left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees
No one assigned
Labels
data-widgets shared
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@r0b1n @gjulivan @HedwigAR @iobuhov