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

Add delimiters option #12

Closed lpsinger closed 2 years ago

lpsinger commented 2 years ago

The old project had a delimiters option to control what keys (other than return) cause a new tag. How can I get this effect with the new project?

i-like-robots commented 2 years ago

I had no intention of implementing this feature in v7 as I have never used it myself and I've never found anything similar to follow from the editable combobox ARIA specs and examples. What is your use case for this feature?

lpsinger commented 2 years ago

There are many contexts where the user would expect a comma to delimit tags, such as entering multiple email addresses.

In cases where the tags are all words without whitespace, the user would expect spaces to delimit tags.

i-like-robots commented 2 years ago

OK I understand.

I'm actually not sure how to make comma and space delimiters work in a consistent and intuitive way because the component now behaves a little differently to the older version. For example, in this version the only way to create a custom tag (when the allowNew option is enabled) is to select the create new option - pressing a delimiter key alone will no longer suffice. It's been changed to work this way because this is what I needed for a project and conveniently it was also easier to ensure the component works well with assistive tech.

In the use case you describe, I can see that entering an email address then pressing the comma key makes sense and this would still work as expected so long as the email address entered is in the options list. However, if the email entered isn't an option then this version of the component wouldn't do anything unless the "create new" option was also selected. Does this make sense?

lpsinger commented 2 years ago

It does, but this was just an example. In my use case, tags do not need to be created dynamically, but the tags are all single words, so the most intuitive delimiter would be a space.

i-like-robots commented 2 years ago

I'm slightly worried this could open up a can of worms (it has in the past) but it's straightforward to implement so if I can enable more flexibility with little effort it's a reasonable trade off:

https://github.com/i-like-robots/react-tag-autocomplete/compare/allow-custom-delimiter-keys

What do you think to this?

lpsinger commented 2 years ago

Looks good. Thanks!