Input cursor position changes to end in SearchInput when controlled usage

[light049]

Could be reproduced at Keyword search section in demo site.

1. Input some text
2. Change input cursor to the start position of input
3. Input text
4. The cursor would move to end of input when 1st character is typed

[cheton]

Related issues:

• https://stackoverflow.com/questions/46000544/react-controlled-input-cursor-jumps
• Bug: cursor jumps to end of controlled <input> tag when value is modified facebook/react#18404 (comment)
  

Proposed solutions include:

1. Do not alter the input value
2. Preserve and restore the cursor position, as shown in the example: https://codesandbox.io/s/boring-dirac-utq82?file=/src/App.tsx

[light049]

2. Preserve and restore the cursor position, as shown in the example: https://codesandbox.io/s/boring-dirac-utq82?file=/src/App.tsx

In the codesandbox, I could not reproduce the issue after removing code about 'selection'

[cheton]

Reference:
https://egghead.io/lessons/react-preserve-cursor-position-when-filtering-out-characters-from-a-react-input

[cheton]

2. Preserve and restore the cursor position, as shown in the example: https://codesandbox.io/s/boring-dirac-utq82?file=/src/App.tsx

In the codesandbox, I could not reproduce the issue after removing code about 'selection'

You have to press Space key to make string replacement work in this CodeSandbox example.

[light049]

But in this issue, there has no value modification in SearchInput, and it still has this behavior.
So, it might be separated into 2 parts to resolve:

• fix SearchInput for input cursor jumping to end
• enhance to help keep cursor position in input