thewca / worldcubeassociation.org

All of the code that runs on worldcubeassociation.org
https://www.worldcubeassociation.org/
GNU General Public License v3.0
319 stars 172 forks source link

WCA Search close icon #8528

Open danieljames-dj opened 7 months ago

danieljames-dj commented 7 months ago

In WcaSearch.jsx, if we select an option, the right side icon is supposed to clear the selection. The icon shown is search icon, and if we click it, it will clear the selection.

Screenshot 2023-11-23 at 21 59 09

If the action of the icon is 'clear', then we need to change the icon to some 'clear' icon.

rafalnawojczyk commented 5 months ago

I would like to contribute on this issue, but I will need further info. Upon testing, this component is probably working fine for now.

When there is any data written into search bar - this Search Icon works as a toggle to show/hide the results dropdown.

What would be the best from UX perspective - when dropdown is extended - this search button should be replaced with "collapse" Icon. If we will try to add "clear' function - we could show it right besides collapse

danieljames-dj commented 4 months ago

Hi @rafalnawojczyk I'm extremely sorry for late reply.

Are you sure that it is currently working as toggle to show or hide dropdown? I think it's not. Currently when I click the search icon, the data is getting cleared which is expected behavior I guess. But the icon shouldn't be 'search' icon, instead it should be some 'clear' icon so that users will know that it will get cleared when that button is clicked.

Thanks for your interest in contributing to this, please let us know if you face any issues while working on this.