debounceChangePeriod erases text / erases cursor position

[lakesare]

<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).

[lakesare]

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 🤔

[keithjgrant]

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