Cursor jumps to the end of the textarea when cut (cmd+x) action is performed

[maxmcgregor]

Observed behaviour: I noticed unexpected cursor behavior while implementing Mentions in a larger application. When text is cut (cmd+x) from the MentionsInput, the cursor jumps to the end of the text area when the cut action is performed. Forcing the user to manually put the cursor into the place they want to type.

Expected behaviour: The cursor should remain in place when text is cut from the MentionsInput element.

Workaround: Users have to copy and delete rather than cut in order to keep the cursor in place.

Steps to reproduce: I created a small, separate react app to check if the cursor behavior was caused by my application or react-mentions. The issue was successfully reproduced in the separate application, suggesting the issue is here.

1. npx create-react-app
   cd create-react-app
   npm i react-mentions

2. Replace all contents of App.js with:

   import './App.css';
   import { useState } from 'react';
   import { MentionsInput, Mention } from 'react-mentions';
   const users = [
   { id: 1, display: 'Max'},
   { id: 2, display: 'Joel'},
   { id: 3, display: 'Chris'},
   ];
   function App() {
   const [value, setValue] = useState('');
   return (
   <div className="App">
     <MentionsInput
       value={value}
       onChange={(e) => setValue(e.target.value)}
     > 
       <Mention
         trigger="@"
         data={users}
         displayTransform={(id, display) => `@${display}`}
       />
     </MentionsInput>
   </div>
   );
   }
   export default App;

3. Run the application

4. Navigate to your local host

5. Type several lines in the textarea

6. Cut any portion of the text and the cursor will jump to the end of the textarea

[jeffelector]

did you find a fix for it?