react-tags

react-tags copied to clipboard

Describe the solution you'd like

Can we have an option to define the max number of tags that the user can select?

Describe alternatives you've considered

This could be handled in the onAddition handler, but it would be much better if the suggestions element isn't showed anymore when the input has the focus and once the max number of tags is reached.

Additional context

N/A

Interesting question... I think this could be handled without modifications to this component but by appending a disabled attribute to inputAttributes option. As you mention above, the onAddition callback sounds like it would be a good place to implement this logic 👍

But wouldn't be better if the library could do this by default instead of requiring extra code in the onAddition callback? "Limit the max selected elements" sounds like a pretty common use case to me, imho.

If it was a very common use case then I would think so but I think this might be the first time this has been requested. That said, there could be higher-level features that could be added to make integrations like this easier.

From what I can tell after researching all the similar libraries (before having started using this one) is that there actually does seem to be a common interest in such a feature. Let me prove this with actual numbers.

• 5 people interested: https://github.com/prakhar1989/react-tags/issues/59
• 2 people interested: https://github.com/prakhar1989/react-tags/issues/467
• 2 people interested: https://github.com/prakhar1989/react-tags/issues/422
• 1 person interested: https://github.com/leekevinyg/react-tag-input/issues/5
• 1 person interested: https://github.com/olahol/react-tagsinput/issues/21

In general, it does make sense to be able to limit user input based on some rules. Even plain HTML input elements have the capability of limiting users by letting them write only a certain amount of characters, only certain type of characters (only letters, only numbers, etc...) or even select only a certain amount of elements.

I think in order for such a feature to work it would require a matching minimum number of tags argument, valid and invalid states, and an API to check the current validation status. I think you hint at this in #227. Whilst I hope all of this would be relatively straightforward to implement I'm currently reluctant to make it a concern of this component and would rather leave this up to implementors.

As always, I'm open to further discussion. If you fancy whipping up a quick example PRs (or have example code to add to this thread) and I'd be happy to consider it further.

So...

1. Add min-tags
2. Add max-tags
3. Add isValid() method that the develop can call and check if the state of the input is valid.

Is that correct? If so, I'll happily send a MR for that.

Maybe also a disabled prop that would allow the developer disable the input if "current_tags >= max_tags" ?

Yes something along these lines as you mention:

• A new minTags prop, integer, defaults to null
• A new maxTags prop, integer, defaults to null
• An isValid() method which checks this
• New rootValid and rootInvalid class names properties and associated example styles (probably a green and red border will do)

The ability to "disable" the component would need to prevent all interactions by making both the input read only and prevent any tags from being removed by the user. This could be tackled separately rather than doing too much at once.

Okey!

This could be tackled separately rather than doing too much at once.

I agree. Maybe add disabled and disabledInput? The first one will do what you just said, while the second one would prevent adding tags / typing in the input. The use case for that option is "I (the dev) have specified maxTags 3 and the user has already selected 3 tags, I'd like to prevent him adding more tags in order to avoid invalid states".

@i-like-robots now that PR #228 is approved, I'm pushing the PR for this issue

@i-like-robots Hi! Did you had a chance to check my MRs?

Yes, please, came here in search of way to specify min number of tags!

For those who are looking for a one tag input, I ended up using https://react-select.com/creatable instead.

Closing as v7 has now been released and displaying an invalid state is supported.