Get `onClear` event when user clicks on ClearButton
See original GitHub issueIn there any way to get onClear
event when user click on ClearButton
inside of Typehead? We need to run special actions in that case. Btw onInputChange
doesn’t trigger at the moment. Is it expected behaviour? But even if it would work it doesn’t help there because I need to differ case when user clear text by clicking specifically ClearButton
.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:8 (8 by maintainers)
Top Results From Across the Web
How do you detect the clearing of a "search" HTML5 input?
For FancyTree filter extension, you can use a reset button and force it's click event as follows: var TheFancyTree = $("#FancyTreeID").fancytree ...
Read more >How to catch the event of clicking the "Clear" button in ...
The event fired when you press Enter after interacting with the input, or move away from the input so it loses focus.
Read more >Targeting Click of “Clear” Button (X) on Input Field
It turns out that clicking the "X" in the search box fires a "search" event. jQuery doesn't support the "search" event, so you'll...
Read more >How To Clear Input Field on Focus - W3Schools
Click on the input field to clear it: ... When the input field gets focus, replace its current value with an empty ......
Read more >How to invoke clear button click event after files are uploaded
User selects file(s); User clicks the Upload button; Upload event is ... You can achieve your requirement by using the OnClear event in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Not sure why I didn’t think about this before, but you can customize the clear button (and click handler) using a child render prop:
Here’s a working example: https://codesandbox.io/s/rbt-onclear-example-osw2e
I see, thanks for the explanation. It certainly seems like a dedicated
onClear
event would be the easiest thing, and it wouldn’t be hard to add. I guess my concern is the overhead of an additional prop and whether or not it’s generally useful. One workaround for you in the short-term would be to check the input’s value (which it sounds like you were trying to do before):By the way, I now understand why
onInputChange
wasn’t working for you: it doesn’t get called when the clear button is clicked, only when the user actually modifies the value in the input directly. That probably seems weird, but it’s consistent with how aninput
works (ie: theonChange
event doesn’t fire whenvalue
is changed programmatically).