Implement clear option in search

[HamshiniR]

Feature Request

Problem description

In search we can have a clear icon, so once we enter we can clear it instead of having a separate button for clearing the text.

Proposed solution

In search as of now we have a search icon in a input field. It would be good if we have search icon in the left and once the text is entered in search we can show the clear option as well. There is a "clearable" prop in Dropdown so as same we can implement in search field also.

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[deniapps]

Yes. I was looking for a solution as well. Looks like the problem is that the input does not allow two icons. The workaround I did is switching the "Search" icon to the "Delete" icon after users enter something. No Input: With Input: You can test this at https://swimstandards.com/rankings by clicking on "Find Me"

Updated on 2/28/2024 The page mentioned above is no longer available for demonstration because I removed the "Find Me" function. However, I have integrated this feature into the main search functionality of our website. You can test it out by visiting https://swimstandards.com/ and using the search box located at the top right of the page.

@gordielachance, I understand the limitations of the workaround. It suits my needs because I display search results as the user types. However, I'm curious if you've come up with a better solution.

[gordielachance]

@deniapps nice, but my form does not have a submit button : search is made when clicking the search icon. I still would like to be able to show two icons.