Clear Button

[AlexBasile123]

Would be really good to have a clear button. Something like an "x" on the right of the search bar.
An event on clicking it as well, onClear.

1. For selected option - It's much easier for the user than clicking on the drop down then unselecting
2. For lost focus after typed into search but not selected - user might prefer to clear the values when they're ready vs. automatically doing it for them on onBlur event.

Don't know if anyone else agrees

[icaroscherma]

Hey @AlexBasile123 ,

Regarding the clear button, it's an easy doable thing on the code, setting it to '' or [] if multiple option is true, but it wouldn't be part of the "drop-in replacement" idea of the HTML's <select>. It's usually something we find on 3rd party libraries but in my projects I like to implement it different, with different business rules tied to it that would harder by using the "default" option. One of my uses is for instance close to the label area (image below).

Regarding the onClear I think it's also very personal, as you can implement it like:

const [value, setValue] = useState([]);
const onChange = (newValue) => {
  if (newValue.length === 0 && value.length > 0) {
    myCustomFunctionForOnClearHere();
  }
  setValue(newValue);
};

return `<Select onChange={onChange} />`;

That said, I would stir away from adding more code that might not be used most of the times.

I'm happy that you're using the package and suggesting new ideas, keeping it active.
Let's see what the others think about it. =)

[AlexBasile123]

@icaroscherma
I've resolved my alignment by adding display: flex to the div that has select-search and button components.
Your "De-select" looks much better... like it's part of select-search component. Curious what was your approach?

[tbleckert]

What we can do better here is to make it more community friendly. Like promoting plugins, alt wrappers, themes etc. This way we can keep the original package small and fast, with a collection of community add-ons for various needs. Like @icaroscherma suggests, this can easily be implemented on the side. Either by providing a custom callback to the renderValue or by utilising the useSelect hook and build your own wrapper completely.

[AlexBasile123]

Thanks, will give it a try! Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: tbleckert ***@***.***> Sent: Tuesday, April 27, 2021 4:37:20 AM To: tbleckert/react-select-search ***@***.***> Cc: AlexBasile123 ***@***.***>; Mention ***@***.***> Subject: Re: [tbleckert/react-select-search] Clear Button (#183) What we can do better here is to make it more community friendly. Like promoting plugins, alt wrappers, themes etc. This way we can keep the original package small and fast, with a collection of community add-ons for various needs. Like @icaroscherma<https://github.com/icaroscherma> suggests, this can easily be implemented on the side. Either by providing a custom callback to the renderValue or by utilising the useSelect hook and build your own wrapper completely. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#183 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AC7QXYO6END6KC2HOZRZ2CTTKZZUBANCNFSM43R6ZPBQ>.

[AlexBasile123]

Functionally works but not easy to line up the button w/ select search component.
We can close this issue. Thanks!