React-diagrams: Cannot read property 'toLowerCase' of undefined CanvasWidget.tsx:66

[Payero]

I have a react-diagram application used to display a State Machine. The user can upload a file containing a new State Machine. To do this, the application opens up a react-bootstrap modal with all the different fields. The text fields shows previously entered data in Chrome as usual. The problem is that when I click on arrow down to select it I get the following error:

ActionEventBus.ts:56 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at ActionEventBus.getActionsForEvent (ActionEventBus.ts:56)
at ActionEventBus.fireAction (ActionEventBus.ts:71)
at HTMLDocument.keyDown (CanvasWidget.tsx:63)
getActionsForEvent @ ActionEventBus.ts:56
fireAction @ ActionEventBus.ts:71
keyDown @ CanvasWidget.tsx:63
ActionEventBus.ts:60 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at ActionEventBus.getActionsForEvent (ActionEventBus.ts:60)
at ActionEventBus.fireAction (ActionEventBus.ts:71)
at HTMLDocument.keyUp (CanvasWidget.tsx:66)

How can I avoid this error?

[flieks]

i am also having a similar error:

[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.

[thys-unomena]

Also experiencing this issue when selecting a browser autocomplete option on a form input field.

[agarwalishan]

I also have the same issue even though my Modal component is outside of canvas widget

[agarwalishan]

@marian2js I read on gitter that issue was something related to antd, could you please elaborate? And if you could provide the code to handle this issue then it would be very helpful.

[agarwalishan]

I found out that if I don't use mouse and select suggestion using keyboard even then same error appears.

[asnaseer-resilient]

I am also getting this issue. I have customised nodes with fields that can be filled-in by users directly within the node, e,g,:

If I try to select a value from the popup of previous values offered by the browser then I see the same error as reported in this issue.

[bknill]

Same in a modal above diagram. The key event listener needs to be disabled when something like this is happening.