How to clear Search box on button click event

[gdhelp03]

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

[nutboltu]

@gdhelp03

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

[chenhualihx]

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='';

[nutboltu]

@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.