[React] Cursor jumps when using Input component with redux-form

[ClementParis016]

I don't know how familiar you are with redux-form, but I'm having issues when using it alongside mui's Input component.

If I use this component to render a form field, the cursor jumps to the end of the input every time I try to insert something at the beginning or in the middle. If I use a standard html <input> tag, it works correctly.
I've been spending hours trying to diagnose the issue without success. It seems that some code inside mui's Input (and maybe TextField) is conflicting with the way redux-form tries to control the input.

Do you have any idea on what could cause the cursor to jump around?

I've made a reproduction on Codesandbox: https://codesandbox.io/s/zr1xzxop8l

[amorey]

I'm not familiar with redux-form but I'll take a look. Thanks for the example snippet!

[ClementParis016]

Don't know if it helps, but I noticed that the onChange handler in TextField is using setState before calling the onChange prop:

mui/src/react/text-field.jsx

Lines 72 to 81 in 0ac250a

	onChange(ev) {
	this.setState({
	innerValue: ev.target.value,
	isPristine: false
	});
	// execute callback
	let fn = this.props.onChange;
	fn && fn(ev);
	}

So maybe these two onChange handlers (mui's one and the props one) are both trying to change the state in a concurrent way which would make React lose the cursor position?

Also, I'm not sure why mui is actually tracking the input value in its internal state (in innerValue), since if it's a controlled input it's going to receive the value from its props anyway.

[amorey]

React enqueues calls to setState() and batches them together so calling this.props.onChange after setState() shouldn't be a problem.

MUI tracks the input value because the inner <input> element is used as a controlled component in order to detect empty/not-empty states.

With regards to the redux-form issue, it looks like the input element loses and regains focus after each keystroke and I think that might be causing the cursor to jump to the end of the input. Do you know what might be causing the blur/focus behavior?

[ClementParis016]

Yes, it may be possible that the input ref is lost at some point and React has to re-create it, which could make it loose the cursor position. At least that's what I've understood by reading a bunch of issues about jumping cursors on React, Redux and redux-form :/

[amorey]

I took a closer look at redux-form and how it interacts with composite components and I think the issue is related to the Input instance render() method being called on each keystroke. I'm going to see if we can fix the issue by making smarter use of shouldComponentUpdate().

[ClementParis016]

Indeed, that may be a good starting point since redux-form updates the component props at a very high rate!

[amorey]

Quick update - I re-implemented the MUI React Input and Textarea components using the Higher-Order-Component React pattern and that seems to have fixed the problem with redux-form. Please try out the new version and let me know if the problem is fixed (v0.9.30):
https://www.muicss.com/
https://www.npmjs.com/package/muicss

[ClementParis016]

@amorey I can confirm it's working now! It's still not clear to me what the issue was exactly, but thank you very much for your help and your great work 👍

[amorey]

Great! I'm happy to hear it's working now. I don't entirely understand it either but I think the the issue was related to the asynchronous behavior of setState():
https://stackoverflow.com/questions/28922275/in-reactjs-why-does-setstate-behave-differently-when-called-synchronously/28922465#28922465

[rishith-p]

If you are using a value from the redux store in the textfield and updating the value of the redux store onChange. The problem is observed from react-redux version 6.0.1 and higher. Change your react-redux version to 6.0.0 and the cursor jumping problem should be solved.

[BartusZak]

The same issue occurs in 7.2.5.

Can someone share a solution different from downgrading the package? :D