react-ace

react-ace copied to clipboard

<AceEditor debounceChangePeriod={500}/> changes the position of the cursor once you types something, and <AceEditor debounceChangePeriod={2000}/> outright erases the text you typed (sometimes, cursor issue is easier to observe).

Aha, that's happening because of the custom mode that updates the component state on change session.getDocument().on('change', this.myCode), it needs to have the same debounce time as the debounceChangePeriod 🤔

Are you setting multiple state values in your onChange callback? I had this same issue, but was able to resolve it by changing the order of my setState calls.

My original structure (slightly simplified):

const handleChange = newValue => {
  setIsChanged(true);
  setValue(newValue);
}

Moving setValue() to the top of the callback fixed the issue:

const handleChange = newValue => {
  setValue(newValue);
  setIsChanged(true);
}

I am not positive, but I suspect it is caused because React isn't able to batch the changes when the callback is debounced; without the debounce the callback is invoked immediately and React is able to batch all state changes before re-rendering. Without changes being batched, your component will re-render once, passing the OLD value back down into React Ace, then re-render a second time with the new value, and Ace editor interprets both of these prop updates as changes and gets the cursor position confused in the process