Monaco Editor with XYFlow fails to accept most space bar keypresses, who is at fault?

[neekfenwick]

This is a cross post from the XYFlow Discussions, for visibility: xyflow/xyflow#5690

Hi all, first time poster here. I have an issue I ran into with my React app, but when I create a very basic codepen I do not see the problem. I can't figure out why. I am raising this here as the bug is apparent in the Editor, but it seems to only happen when XYFlow is added to the page.

Reproducible problem: https://codesandbox.io/p/github/neekfenwick/TestReactApp
You should be able to go to the Run menu on the left and run the "dev" task, this should open the Preview where you see the page running.

1. initially only the Editor (monaco-editor/react) is visible. It works fine, try typing a few characters with many space chars in between.
2. Click the "Show react flow" checkbox, which puts an XYFlow graph on the page, taken from the basic documentation. Nothing fancy.
3. Try typing the same characters into the Editor.

Result: something about having Editor and XYFlow on the page at the same time breaks the space bar input.

Now, a much more simple codepen, also using monaco-editor/react and xyflow in React, seems to work fine, which is quite frustrating: https://codesandbox.io/p/sandbox/editor-with-xyflow-react-flow-965p85

The difference is something about the project structure.

• The simple one I created by copying a basic React template I found, and adding the components required to it.
• The broken one I created using npx create-react-router@latest to get a boilerplate React Router app, add adding the same components to it.

I have tried removing Extensions, even creating a completely clean Chrome Profile, the problem still persists. I also tried making the XYFlow component be the initial element on the screen, and the checkbox control presence of the Editor, as well as have both components immediately on the page on load, still happens.

So, please:

• Does the error happen for you too, or just me?
• Is this a problem with XYFlow, Editor, React, or some other voodoo?
  

[neekfenwick]

As mentioned here xyflow/xyflow#5690 and in the linked issue xyflow/xyflow#5037 this issue was fixed by adding className="nokey" to the Editor element, i.e. <Editor className="nokey" /> ... I have no idea why this works but at least the issue has been resolved for now.