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.

[kobajs]

Same with me

[asnaseer-resilient]

I have implemented this "hacky" workaround by downloading and customising CanvasWidget.tsx:

  ...
  componentDidMount() {
    this.canvasListener = this.props.engine.registerListener({
      repaintCanvas: () => {
        this.forceUpdate();
      }
    });

    this.keyDown = (event: any) => {
      try {
        this.props.engine.getActionEventBus().getActionsForEvent({ event });
        this.props.engine.getActionEventBus().fireAction({ event });
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log('>>> keyDown: Ignoring error', err);
      }
    };
    this.keyUp = (event: any) => {
      try {
        this.props.engine.getActionEventBus().getActionsForEvent({ event });
        this.props.engine.getActionEventBus().fireAction({ event });
      } catch (err) {
        // eslint-disable-next-line no-console
        console.log('>>> keyUp: Ignoring error', err);
      }
    };

    document.addEventListener('keyup', this.keyUp);
    document.addEventListener('keydown', this.keyDown);
    this.registerCanvas();
  }
  ...

The implementation of this.props.engine.getActionEventBus().fireAction({ event }); basically calls getActionsForEvent({ event }); which causes the exception to be thrown. I therefore call getActionsForEvent before calling fireAction and ignore any exception that it throws.

[asnaseer-resilient]

I noticed that if I have a modal dialog open, then, whenever I perform a scroll up/down action using the mouse wheel, then I see the canvas components zoom in/out.

Is there a way to prevent this from occurring?

[marcosaso]

Hi everbody!

I'm having the same issue only in Chromium based browsers (Chrome and Brave). If I've tested in Safari and Mozila using Mac OS and in that browsers doesn't have any problem.

This issue appear when I add a input with a datalist bellow to a react diagram in another div and choose one option of autocomplete option: Ex.:

<input list="listExamples">
   <datalist id="listExamples">
           <option value="PETR4" />
            <option value="VALE4" />
            <option value="Internet Explorer" />
            <option value="Chrome" />
    </datalist>

If I use a keyboard or mouse and choose a autocomplete option like "PETR4" on chromium browser based, it will throw the error:

 

``

Can anyone help me with this issue?

[bold881]

Same with me. antd modal with input keyup event

[qwelol]

I also ran into a similar problem and did a little research. The error is caused by handlers that are added to the document: It turns out that Canvas Widget listens to all events on the page. To solve this problem, I wrapped the form in an element that will intercept these events: P/s my form was not inside the diagram as in marcosaso's comment above

[flieks]

@qwelol you wrapper which form or element? The custom CanvasWidget or the whole Diagram component ?

[qwelol]

@flieks I wrapped the form(text input). To prevent the event from bubbling up to the Document. Because CanvasWidget adds its KeyUp and KeyDown handlers to the Document. @dylanvorster Is this normal behavior? https://github.com/projectstorm/react-diagrams/blob/dd68d1fe671925ba81d8e9e80ae6b3467e2d5c30/packages/react-canvas-core/src/entities/canvas/CanvasWidget.tsx#L69-L70