Default delete key handler preventing users from using backspace in other elements on the page

Describe the Bug

When the ReactFlow component is present on a page, the backspace key is intercepted and seems to be prevented from working anywhere else on the page (other than purely native text inputs completely controlled by the browser).

I don’t think that document-scope key event handlers should be calling Event.preventDefault().

Your Example Website or App

https://codesandbox.io/s/sharp-tharp-jhxqm4?file=/src/App.js

Steps to Reproduce the Bug or Issue

1. See above example
2. Attempt to backspace text out of the text input (it doesn’t work)
3. Set deleteKeyCode={null} in the Flow component
4. Note that using backspace in the text input now works

Expected behavior

As a user, I should be able to use the backspace key elsewhere in the window.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome, Safari
• Version: 103.0, 15.5

Additional context

The example I provided is using exactly the UI component library that I am using, for maximum accuracy to my use case.

[chrtze]

In the next major version (v11) you can add a class name nokey to all elements that should be treated as an input field.

[kahboom]

@EzraBrooks - I’ve been stuck on this issue for several days and couldn’t quite figure it out. Actually in my case it was even causing a complete re-render at times when pressing the backspace. Your workaround fixes it, thanks so much!