search

i-like-robots / react-tag-autocomplete

⚛️ A simple, accessible, tagging component ready to drop into your React projects (new repo)
https://i-like-robots.github.io/react-tag-autocomplete/
ISC License
178 stars 12 forks source link

Allow resetting the input #18

Closed tarngerine closed 1 year ago

tarngerine commented 2 years ago

Because the Input component is providing value attribute, the default HTML behavior of an <input type="reset"> does not clear the <input type="text">, since HTML input does not reset when a value attr is provided or set via setAttribute.

We are able to reset the selected prop but we cannot reset the input value attr as there is no prop to do so.

I can see a few ways here:

  1. Change Input.tsx to not use value as a prop, but rather a useEffect that sets the input value imperatively. This allows the standard HTML type="reset" to clear it
  2. Add a input prop to <ReactTags> that is passed to Input.tsx's value for a fully controlled input

The latter is probably more reacty

i-like-robots commented 2 years ago

It's not a tested/documented feature yet but the component does have an API similar to the previous version of the component and this includes a .clear() method. I've made an example here:

https://github.com/i-like-robots/react-tag-autocomplete/blob/11ce2d41c8d9d3261672ab0bfb3db39ff90947fa/example/src/main.jsx#L358-L360

Would this suit your needs? The API may change but a method to clear the input will always be included.

Custom input renderers are certainly a possibility, I haven't given it much thought yet but it's certainly possible.

tarngerine commented 2 years ago

less about custom input renderer, more about making it a controlled input :) but this will work for now. thanks!

i-like-robots commented 1 year ago

I'm going to close this issue now. The input value can be get/set via the API and #36 adds the capability to provide a custom input component and therefore enable full control.