I am trying to replicate the mobile tag-adding mechanism that tumblr has. I have included a picture of the screen I am talking about below.
I want to replicate the following features:
- Chips are inline with text field. Text field resizes dynamically to either take the remainder of the line, or take up the next line if the content is too long
- Text is turned into a chip when a comma is added (e.g. If I am typing "dog", and then I type "dog,", A "dog" chip will be created
- Long chips cut off content with ellipses
- Chips can be deleted with backspace
- There is no text field underline decoration
- Chips fill up row then wrap to next row (and entire container scrolls if there are too many rows to display simultaneously)
There are some libraries that already exist to allow a text input field with chips, but they have a lot of other features that I'm not interested in right now like the recommendation system etc, and generally just don't look the way I want with regards to multiple lines and text wrapping etc. If anyone knows how to replicate the example below, I would really appreciate it!