Adding long mentions on single input doesn't move input to the end

[dominikkurbiel]

Steps to reproduce:

1. Type long mention in single line input (longer than width of input)

Expected behaviour: Cursor should go automatically to the end of input.

Observed behaviour: We can see only the part of mention and we don't see where the cursor is. We need to click left arrow (or write more) to go to the end of input

https://user-images.githubusercontent.com/22274153/117020476-c57a7000-acf6-11eb-9804-68b4604d2628.mp4

[louxinbo]

I have the same issue. Any workaround?

[awuuu0716]

I have the same issue too, this is my solution:

const ref = useRef<HTMLInputElement>(null);

<MentionsInput inputRef={ref} {...yourProps}>
    <Mention
      onAdd={() => {
          setTimeout(() => {
            if (!ref.current) return;
            const end = ref.current.value.length;
            ref.current.setSelectionRange(end, end);
            ref.current.focus();
          }, 0);
        }}
     {...yourProps}
    />
</MentionsInput>