i-like-robots/react-tags

Max number of tags

alexandernst opened this issue · 14 comments

alexandernst commented

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

i-like-robots commented

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 👍

alexandernst commented

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.

i-like-robots commented

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.

alexandernst commented

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.

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-like-robots commented

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.

alexandernst commented

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.

alexandernst commented

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

i-like-robots commented

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.

alexandernst commented

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".

alexandernst commented

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

alexandernst commented

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

Stvad commented

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

rdubigny commented

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

i-like-robots commented

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