Undo manager shared between two instances

Problem

1. AceEditor component is rendered
2. State change causes the AceEditor component to re-render with new name and value (switched from one tab to another in a parent component, for example)
3. Undo reverts code back to the value in the previous render

Sample code to reproduce your issue

Make a change in the editor. Go to the next tab. Make another change. Undo.

constructor() {
  this.state = {
    tabId: 0
  };
}

render() {
  const { tabId } = this.state;
  return (
    <div>
      <AceEditor name={tabId} mode="javascript" />
      <button onClick={() => this.setState({ tabId: this.state.tabId + 1 })}>Next tab</button>
    </div>
  );
}

Expected behavior

I would expect the undo manager to only undo changes for the editor session I am currently seeing, and for it not to undo changes from previous editor sessions.

[SidneyNemzer]

It looks like the Ace component has no logic to handle a name change

https://github.com/securingsincity/react-ace/blob/master/src/ace.js

I’m not sure how React would handle this, but maybe you can force an update by using the key attribute?

[securingsincity]

Hi all given it’s been quite some time and no activity on this issue, I am closing it.