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

Doesn't create new tag on delimiter key when no listbox item is selected #69

Closed Faithfinder closed 5 months ago

Faithfinder commented 5 months ago

Expected behaviour

If allowNew, when I type and press Enter, if I didn't select an existing tag, a new one is created

Current behaviour

Nothing happens (unless I press "down" first)

Steps to Reproduce

Steps to reproduce the problem:

  1. Open example https://i-like-robots.github.io/react-tag-autocomplete/
  2. Scroll to Custom tags (second example)
  3. Type a valid tag (>4 symbols)
  4. Press Enter without pressing anything else

Additional context

This worked in V6. It's possible to workaround this using the API, but it would be more complicated than doing it inside the library

i-like-robots commented 5 months ago

Thanks for your question @Faithfinder - what you're describing is the intended behaviour, as stated in the changelog:

When the allowNew prop is enabled a new tag can only be created when selecting the "new tag" option from the listbox

This change was made to ensure consistent feedback to assistive tech to reduce ambiguity.

If you'd like to mimic the previous version, have you tried enabling the activateFirstOption prop in combination with the allowNew prop to try and automatically select the "new tag" option?

Faithfinder commented 5 months ago

Yeah, it helps, but it does mean that if something was found in existing options, it's not "Add" that's selected.

I can't really say if it's a big problem - I'm in a new job, upgraded from v6 for Typescript, and noticed the difference in behaviour. Maybe it's for the best? Not sure