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 show them the available tags, as soon as they start writing a tag by typing the hash (#) symbol.
What sounds simple in the first place is actually quite a 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 canceled by using an invalid tag character.
Calculating the position of the input caret of the user. Yeah, I know this sounds pretty simple, but it actually isn't. Calculating the viewport offset position...