Cursor jumps to beginning of text input

[pascal-codetaal]

1. What version of RJEA are you using (react-json-editor-ajrm version)? 2.5.8
2. What operating system and processor architecture are you using? Mac os x
3. What did you do? I created an instance of the json editor and the placeholder is attached a reactive value. I configured the json editor with the option reset={false} so no update should happen when the placeholder value updates.

I also created a codesandbox where you can see the problem, start editing the text and wait a little bit and the cursor will jump.

https://codesandbox.io/s/z6jmy6j8xl

4. What did you expect to see? I would expect the cursor keep the same position.

5. What did you see instead? The cursor jumps to the beginning of the input

[SachsKaylee]

Hey @pascal-codetaal

Whenever the user stops editing the text the code will be reformatted after a certain amount of time without any further interaction. This "format" is what currently resets the cursor. I agree that this is not nice looking and rather unintuitive.

We'll look into this. Thank you for reporting this.

[pascal-codetaal]

@PatrickSachs do you have an idea how to fix this? And if so, perhaps i can help...

[AndrewRedican]

Cursor jump is one of those things I have been wanting to fix for some time.

@pascal-codetaal, we are more than happy to have you involved. Feel free to submit a PR. Either way, I will also take a look at this over the weekend.

[lybo]

@pascal-codetaal @AndrewRedican

I have the same annoying issue. If it's difficult to keep the cursor to the same position then I suggest a quicker solution:

• on reformat event the cursor should loss of focus from the editor (blur/focus out event).

Because the main problem is while I'm typing and the cursor is reset then I continue writing at the beginning of the editor which causes json error :(

[laxman3131]

Facing same issue. One notable piece of information is this doesn’t happen if there is no placeholder prop passed even after formatting the json

[CrizR]

Yeah, this is a major issue for me as well.

[vejandla]

having the same problem. sometimes our JSON content is 700+ lines, reformatting for every keypress is really knocking down the performance of the application.

@lybo did you find any meaningful solution?

I couldn't understand whether everyone else is getting around this issue or perhaps it is not a big problem for them.

[alexxshadow]

An old thread I know.. but if anyone else stumbles across this looking for a solution then I've found the following to work (some option removed to keep it shorter, but essentially I am setting a 'keyPressed' boolean, a useEffect hook, and the 'viewOnly' option, which gets momentarily switched on and off. Not pretty, but it seems to work.

const Edit = ({ metadata, handleChange }) => {
	const [keyPressed, setKeyPressed] = useState(false);
	const [data, setData] = useState(false);

	useEffect(() => {
		handleChange(data);
		if (keyPressed) {
			setKeyPressed(false);
		}
	}, [keyPressed]);

	return (
		<Wrapper>
			<JSONInput
				id="editor"
				waitAfterKeyPress={0}
				placeholder={metadata}
				viewOnly={keyPressed}
				onChange={(data) => {
					setKeyPressed(true);
					setData(data);
				}}
			/>
		</Wrapper>
	);
};

[wdgrantham]

I too ran into this behavior. I ended up solving the issue by only providing the placeholder prop to the component when the component boots up, and not afterword.

Specifically:

                  <JSONInput
                    id = 'a_unique_id'
                    placeholder = { !query ? placeholder : null } // If the user has never typed anything and there is not query, set the placeholder, otherwise don't
                    locale = { locale }
                    onChange = { (q) => {
                      setQuery(q.jsObject); // When the user types, save their input to state to use elsewhere
                    }}
                  />

[AndrewRedican]

I no longer intend to update this project. I am working instead on a complete rewrite.

I'd like to thank you for using and taking interest in this project.

I also would like to apologize for not following up sooner. However, do realize for the most part this has been a one-man show, and the occasional contributions I used to receive. What I am saying is, I am in dire need of volunteers.

If this is something you would be interested in participating in, you can join in the discussion.

I've taken note of this thread, and I'll keep this under consideration for the new project.