react-search-field icon indicating copy to clipboard operation
react-search-field copied to clipboard

How to clear Search box on button click event

Open gdhelp03 opened this issue 5 years ago • 3 comments
trafficstars

Search field is working fine but I want to clear Search Field on Button Click. One more Question How can I change for color

gdhelp03 avatar Oct 13 '20 05:10 gdhelp03

@gdhelp03

  • this clear feature is not available in this component.
  • Which colour would you intend to change?

nutboltu avatar Oct 21 '20 03:10 nutboltu

I got a solution on how to add the clear feature by adding a button and its event handler: let x = document.querySelector("input.react-search-field-input"); x.value='';

chenhualihx avatar Oct 24 '20 17:10 chenhualihx

@chenhualihx I believe the ideal approach should be handling the clear option using props without any breaking changes. Your approach would be an option but the side effect is it would mutate the component. The proposed solution would be

  • Add a new prop (clearOption) and mark it false by default.
  • if the prop is true, introduce a close button, (Though I am still thinking what should be the right place to display this button).
  • clear the value while clicking this button.

nutboltu avatar Oct 25 '20 06:10 nutboltu