InputTag Component

[italotabatinga]

InputTag Component

Overview

This component should render a list in separated removable tags and have a sided input to enter new elements to the list.

Purpose

The purpose is pretty similar to MultiSelect, but the elements are not predefined by the options prop, it would be a list fully managed by the user. In VTEX ID we receive a list of email hosts as input, I couldn't think in any Styleguide component to supply this need.

Context

I made a component based on MultiSelect from Styleguide.

I called it InputTag based on the new Styleguide inputs components, but I think that maybe this component and MultiSelect could be the same, the difference would be a flag (options existence e.g.) that would enable the Dropdown and limit the adding of elements to options elements.

Reference

• See Issue #61
• react-tagsinput

[ericreis]

@italotabatinga In the EXPERIMENTAL_Select component we have a prop called creatable that allows you to add values that were not present in the options array, creating a new one. Does it supply you needs?

[italotabatinga]

@ericreis Yes and no, this is pretty much what I need but I think a Create '{option}' dropdown may confuse the user, since there are no options to be selected or "created". Couldn't this be a path to a possible solution?

a flag (options existence e.g.) that would enable the Dropdown and limit the adding of elements to options elements

[ericreis]

@italotabatinga Why don't you create an array with the most used email hosts and make it creatable? We were going to deprecate the MultiSelect component exactly to avoid this bevahiour you are trying to use.

[italotabatinga]

@ericreis I thought about it with @rnbez and we think that the Select component may not fit right, cause, in all cases, it has a Creatable dropdown and a down arrow (to show that this component has a dropdown).

Why don't you create an array with the most used email hosts and make it creatable?

Our need is most like gmail email input, it may show suggestions but not like it has "email options", more like a "email search". In our case, since our email host list input can have any possible value, maybe suggestions also doesn't fit by now.

So, I think this component may be too specific to our case, I thought it could be valuable to handle a list as input, but I see that Select can handle most VTEX use cases.

Anyway, I can help if you see this component is worthy :hangloose:

[cmdalbem]

@italotabatinga I agree with @ericreis, it's seems too close to what Select already does. I don't see a strong case for having a totally separate component for that which will split our energies having to maintain both. I'd suggest you see what changes you'd need to our existing Select solution, and suggest to the group or implement yourself these changes. For instance: hiding the caret when the options array is empty seems to make a lot of sense ;)

[cmdalbem]

@davishama I'd say it's your call

[davishama]

@cmdalbem thanks! I've talked to @italotabatinga about it :)

[cmdalbem]

@davishama can you document here what you decided, so we can either close this Issue or keep it updated with the design directions?

[davishama]

@cmdalbem we decided to use the component that @italotabatinga created for this project specifically (without the need of a dropdown/selector)

[cmdalbem]

@davishama OK, I'll close this issue then. It'd be nice though to check if we could improve the Styleguide component for this kind of usage, so nobody needs to create their own special snowflake in the future. Feel free to open a new Issue with these suggestions we devs have the specs to work with.