i-like-robots / react-tags

⚛️ Legacy repo for the fantastically simple tagging component for your React projects (legacy repo)
http://i-like-robots.github.io/react-tags
MIT License
457 stars 171 forks source link

Add clearSuggestionSelection method #250

Closed joelposti closed 2 years ago

joelposti commented 3 years ago

I'm proposing clearSuggestionSelection method to be added. This allows the developer to reset ReactTag's inner index state back to the initial value of -1. Resetting index has the effect of clearing the current suggestion selection.

Use case

Suggestions list is populated with most recent tags. Suggestion list is not filtered according the user input. Whatever the user types into the input field the suggestion list stays the same. User can select a suggested tag from the suggestion list or they can write a completely new tag.

Scenario where current behaviour is problematic

  1. User types something into the input field.
  2. Suggestion list is presented.
  3. User uses arrow keys to select a suggestion.
  4. But instead of adding the selected suggestion the user writes a custom tag.
  5. User presses the delimiter key in order to add the custom tag they wrote. Problem: ReactTags adds the tag that was selected earlier, not the one user had written into the input field.

See the GIF below for a visual demonstration. In it the user wants to add tag ‘hello’. Instead the previously selected tag ‘jäte’ is added.

suggestion-selection-not-cleared-after-typing-more

How clearSuggestionSelection fixes the problem

By calling clearSuggestionSelection in onInput callback function the problem is solved. See the GIF below for a demonstration. In it the user is able to add tag ‘hello’ even though they selected tag ‘jäte’ previously.

suggestion-selection-cleared-after-typing-more

coveralls commented 3 years ago

Coverage Status

Coverage remained the same at 100.0% when pulling 8a38a73943dfd4089ab66855c92fc836261d311f on response200:main into de5eb14454828d81ea401e928eef8b356d00fa5c on i-like-robots:main.

i-like-robots commented 2 years ago

Thank you for your contribution @joelposti - much appreciated 🙇