weird state change in newest version

[1muen]

Describe the bug
it worked in 0.50.1 but in 0.51.0 it is weird.
0.50.1:
https://user-images.githubusercontent.com/49640488/220974267-8c5b3b12-1683-4ab6-924f-c81386439ede.mp4

0.51.0:
https://user-images.githubusercontent.com/49640488/220975391-d467930d-4308-44a0-a26d-87266abe0978.mp4

It occures, if the content in the editor is loaded depending on a state. In our Application we had 3 Tabs. If a user was in the second or third Tab and modified the text and pressed save, the text got saved in the first tab.

To Reproduce
I forked the repo and modified the example. Here is Version 0.50.1:
0.51.0:

This is the Editor to reproduce:

const BuggyEditor = ()=>{
  const [state, setState] = useState(()=>{return {values:["lol", "test2"], index:0}})
  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: "line",
    automaticLayout: false,
  };

  const valueChange = (value,event)=>{
    const t = [...state?.values]
    t[state?.index || 0]=value
    setState({...state, values: t})}

  return ( <div>
    <div>
      <button onClick={()=>setState({...state, index: state?.index+1})} type="button">
        index++
      </button>
      <button onClick={()=>setState({...state, index: state?.index-1})} type="button">
        index--
      </button>
      index={state?.index}
    </div>
    <hr />
    <MonacoEditor
      height="400"
      language="html"
      value={state?.values[state?.index || 0]}
      options={options}
      onChange={valueChange}
    />
  </div>)
}

Expected behavior
A mix of both. I would not expect "test2" to stay in the editor, if the content should be undefined as it is in the 0.50.1 Version:

firefox_btRRPoHLpN.mp4

, but I would expect the behaviour of 0.51.0 if I edit something.

Environment (please complete the following information):

• OS: Linux
• Browser Firefox, Chromium, Brave
• Bundler webpack

[LongchongWang]

I think there is a bug dealing with the "onChange" prop, as it doesn't update during re-renderings.

[brionmario]

Can confirm this issue in v0.53.0.

I have a callback function that needs to be triggered onChange.

const { updateAuthenticationSequence } = useAuthenticationFlow();

return (
   <MonacoEditor
      onChange={ (value: string) => {
          updateAuthenticationSequence({
              script: value
          });
      } }
      ...
  />
);

on editor value change, updateAuthenticationSequence was having issues since a state i'm referring from the hook was having the initial value. It looked to me like a closure issue.

Downgrading to v0.50.0 helped.

[domoritz]

Thanks for looking into this. Since you identified the version that introduced the issue, can you send a pull request to resolve this?

[ericalli]

Also experiencing this issue. Downgraded to ^0.50.0 for the time being.

I don't see an obvious reason for why this is occurring, but it may be related to this useEffect how the __prevent_trigger_change_event.current is being set.