Rank 1
Iron
Hello
I have an React Editor which gets and updates the content in a parent Form. It works all as expected except that after every render (either after onChange or onBlur) it focuses the cursor at the end of the content. This is fine if I'm currently writing at the end of the Editor, since the cursor stays there, but if I try to change some paragraph somewhere in the middle of the text, then the cursor jumps to the end of the text after updating the state and rerendering. (the state must be updated after every change in the editor, there is no other way to handle my requirement)
Is there a way to save the cursor position before updating the state or maybe using the on the OnChange or OnMount event to reset the cursor position at the same position where it was before? A tipp in the right direction or an example would be great.
Thanks & BR
Besir
Thank you for getting in touch with us. I have tried to replicate the issue but could not observe the unusual behavior. Here is my simple example - https://stackblitz.com/edit/react-uja7bu?file=app%2Fmain.tsx
Would you please provide a simple stackblitz or and updated example so we could check the exact example and be more helpful with a posible solution?
Hi Plamen
In your example you dont have an OnChange or On Blur event on the Editor, so it works as expected. In my case I have to update another field on every change, and this causes the editor to rerender and the cursor position is at the end of the entered text in the Editor. It is actualy ok wenn I write at the end, but if I change something in the middle of the text, then it jumps at the end after typing something. Having a Button to update the other field is not an option for me.
A possible solution would be like this:
1. Before Change/Blur -> Save cursor position
2. After Change/Blur done, set the cursor position again to the value saved before
Can you provide me an example where I can read the current position in one of the OnChange or OnBlur events?
Thanks in advance
BR
Besir
Here is an example with a onChange event where I just updated some otherValue with the markup transformed value but still could not replicate the unusual issue - https://stackblitz.com/edit/react-uja7bu-h8fndv?file=app%2Fmain.tsx
Please review it and let me know what else should I add or do in order to observe the issue at my side and be more helpful.