Is your feature request related to a problem? Please describe.
We're looking to build a "tags" component/functionality to our app. Being inspired by the design in sites like Jira and Teamwork. Unfortunately, neither the Reshaped Autocomplete or the combination of Input + Dropdown work in our case.
Autocomplete does not work because it doesn't support multiple items being selected.
Input + Dropdown does not work because the state of the Dropdown, and its focused state changes, makes the Input Field and Dropdown being visible at the same time impossible.
Describe the solution you'd like
The Autocomplete component to support multiple selections. I've noticed in the HTML structure that the <input> itself is in an outer div from the startSlot in the Textfield component, which makes the layout of ( [tag1] [tag2] [a lot more tags that overflow] Placeholder here... ) impossible on the same line, even after heavily tweaking the CSS. When there are a lot of tags (startSlot) in the input, and it breaks to two lines, then the input always stays on a new line if everything is done with flex-wrap.
Another feature would be Dropdown, Popover and Autocomplete in this case: In the sandbox, if you add a lot of tags, while not closing the Popover you will notice that the Popover stays at its initial position (below the input), even when the input moves lower because of the tags overflow above. It would be a great addition for this position to update and follow its Trigger
Describe alternatives you've considered
The one from the Codesandbox.
Is your feature request related to a problem? Please describe. We're looking to build a "tags" component/functionality to our app. Being inspired by the design in sites like Jira and Teamwork. Unfortunately, neither the Reshaped Autocomplete or the combination of Input + Dropdown work in our case.
Autocomplete does not work because it doesn't support multiple items being selected. Input + Dropdown does not work because the state of the Dropdown, and its focused state changes, makes the Input Field and Dropdown being visible at the same time impossible.
This can be better understood if you have a look at our current rough implementation and alternative for now.
Describe the solution you'd like The
Autocompletecomponent to support multiple selections. I've noticed in the HTML structure that the<input>itself is in an outer div from thestartSlotin theTextfieldcomponent, which makes the layout of ( [tag1] [tag2] [a lot more tags that overflow] Placeholder here... ) impossible on the same line, even after heavily tweaking the CSS. When there are a lot of tags (startSlot) in the input, and it breaks to two lines, then the input always stays on a new line if everything is done withflex-wrap.Another feature would be
Dropdown,PopoverandAutocompletein this case: In the sandbox, if you add a lot of tags, while not closing thePopoveryou will notice that thePopoverstays at its initial position (below the input), even when the input moves lower because of the tags overflow above. It would be a great addition for this position to update and follow itsTriggerDescribe alternatives you've considered The one from the Codesandbox.
Additional context An external library that is very similar to JIra's/our idea: https://github.com/yairEO/tagify
Please let me know if you need more information, as this might appear confusing at first!