React-diagrams: Cannot read property 'toLowerCase' of undefined on non related keydown

[msaglietto]

Hello .. I encounter this strange issue where the canvas is reciving a key event without a key

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at ActionEventBus.getActionsForEvent (ActionEventBus.js:75)
    at ActionEventBus.fireAction (ActionEventBus.js:92)
    at HTMLDocument.keyDown (CanvasWidget.js:93)
ActionEventBus.js:79 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at ActionEventBus.getActionsForEvent (ActionEventBus.js:79)
    at ActionEventBus.fireAction (ActionEventBus.js:92)
    at HTMLDocument.keyUp (CanvasWidget.js:99)

How to Reproduce it:
I have beside my graph a Modal .. that Modal has a TextField .. I was listening in the Input the keyboard change to make an action on Enter key down

So when you enter some content from the autocomplete where you selected with your mouse the text instead of typing... an Event is fired with Event.key = "Unidentified" and for some reason the event reach the graph (I think its because of https://github.com/facebook/react/issues/11387) with the key as undefined

I created a codesandbox to demo it: https://codesandbox.io/s/quirky-aryabhata-63315
but because of the a.default is not a constructor (please fix this) is not showing .. even if I added rescripts to modify the .babelrc to use sourceType unambiguous .. but it seems codesanbox ignore my rescripts changes ... so you will have to download the source from there to try it sorry =(

[piotrmitrega]

I am having this issue too. Any news on that? @msaglietto

[msaglietto]

I end up using https://github.com/ds300/patch-package and patching https://github.com/projectstorm/react-diagrams/blob/master/packages/react-canvas-core/src/core-actions/ActionEventBus.ts#L56

diff --git a/node_modules/@projectstorm/react-canvas-core/dist/es/core-actions/ActionEventBus.js b/node_modules/@projectstorm/react-canvas-core/dist/es/core-actions/ActionEventBus.js
index 9edc24e..4ad675c 100644
--- a/node_modules/@projectstorm/react-canvas-core/dist/es/core-actions/ActionEventBus.js
+++ b/node_modules/@projectstorm/react-canvas-core/dist/es/core-actions/ActionEventBus.js
@@ -43,12 +43,12 @@ class ActionEventBus {
         }
         else if (event.type === 'keydown') {
             // store the recorded key
-            this.keys[event.key.toLowerCase()] = true;
+            this.keys[event.key ? event.key.toLowerCase() : 'Unidentified'] = true;
             return this.getActionsForType(Action_1.InputType.KEY_DOWN);
         }
         else if (event.type === 'keyup') {
             // delete the recorded key
-            delete this.keys[event.key.toLowerCase()];
+            delete this.keys[event.key ? event.key.toLowerCase() : 'Unidentified'];
             return this.getActionsForType(Action_1.InputType.KEY_UP);
         }
         else if (event.type === 'mousemove') 

Its only a safeguard for the event key I'm not sure if breake something but so far all seems good .. so if you find its a suitable solution I can submit a PR

[marian2js]

I had the same issue, the problem was having the Modal component inside the Widget component. Moving the modal outside the diagram solved the issue for me.
Thanks to @renato-bohler who helped me figuring this one out on gitter.