Wrong cursor placement when choosing from typeahead

[alya]

When the user inserts a typeahead suggestion that already has some message text after it, the cursor doesn't get placed after the suggestion. Instead, it is placed somewhere in the middle of the typeahead suggestion that was selected. This happens for both @ mentions and stream names (#foo).

CZO thread

[gnprice]

Copying some information from that chat thread:

I took a quick look back at the implementation []: we just set the new value for the whole content of the input, and don't do anything to try to control where the cursor is.

So that behavior makes sense -- probably what the underlying input code is doing is something like, if your cursor was 80% of the way into the old text, then it gets placed 80% of the way into the [new] text. That's probably about the best that we could hope for the underlying input code to do, given the information we're giving it.

To fix this, we'll want to explicitly set where the cursor should be after the autocomplete. I expect there should be an API for that, and we totally have enough information to know what the right position should be, so I think this should be quite doable.

[SilentCruzer]

I would like to work on this issue.

[WesleyAC]

I looked into this a little bit today. This actually is a problem for emojis as well. For instance:

foo :heart| bar

autocompletes to:

foo :heart_eyes_c|at: bar

I think the fix here is to have getAutocompletedText return both a string and a selection — that's the place that has the info needed to make a decision about where the cursor should go.

[SilentCruzer]

Right now in the app, we are getting the current position of the text cursor through the selection variable, but it has no connection with the Input and Autocomplete view component. So one possible solution is to add a selection prop to the Input component.

The problem with the solution is that the text cursor sometimes get stuck in a loop after autocomplete happens because of the selection props (see video below).

Changes made: link

textCursor.mp4