Here, we're going to build a component (and its supporting structures) to make the process of entering tags a smooth experience for our users. So far, they can write project tags, but it requires them to know the project IDs, which makes our tag management quite useless. What we'd like to do is provide the user with some choices when they are about to write a tag. Ideally, we will show them the available tags as soon as they start writing a tag by typing the hash (#) symbol.
What sounds simple at first is actually a quite tricky thing to implement. Our tag input needs to deal with the following challenges:
- Handling input events to monitor tag creation. Somehow, we need to know when a user starts writing a tag, and we need to know when the typed tag name is updated or cancelled by using an invalid tag character.
- Calculating the position of the input...