losing focus while dragging

I have sample code from docs.

const DS = () => {
    // create an instance of the engine with all the defaults
    const engine = createEngine();

    // node 1
    const node1 = new DefaultNodeModel({
        name: 'Node 1',
        color: 'rgb(0,192,255)',
    });
    node1.setPosition(100, 100);
    let port1 = node1.addOutPort('Out');

    // node 2
    const node2 = new DefaultNodeModel({
        name: 'Node 2',
        color: 'rgb(192,192,255)',
    });
    node2.setPosition(200, 100);
    let port2 = node2.addInPort('In');

    // link them and add a label to the link
    const link = port1.link<DefaultLinkModel>(port2);
    //link.addLabel('Hello World!');

    const model = new DiagramModel();
    model.addAll(node1, node2, link);
    engine.setModel(model);

    return (
        <div className="app-wrapper">
            <div style={{height: "100vh", width: "90%", backgroundColor: "aliceblue"}}>
                <CanvasWidget className="canvas" engine={engine}/>
            </div>

        </div>
    );
}

.canvas {
    position: inherit !important;
}

I have to drag and move node very slowly. Cursor leaves node at some place behind while I’m still dragging (holding mousebutton down). Node is selected and still in dragging event so when I return back to the node the drag animation comes up again.

Using newest version of browser (firefox, chrome). React-diagrams v 6.1.1.

Edit: dependencies:

"dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@microsoft/file-browser": "^1.0.0-preview.0",
    "@microsoft/microsoft-graph-client": "^1.7.0",
    "@mikecousins/react-pdf": "^5.5.0",
    "@projectstorm/react-canvas-core": "^6.1.1",
    "@projectstorm/react-diagrams": "^6.1.1",
    "@types/jest": "24.0.15",
    "@types/node": "12.0.8",
    "@types/react": "16.8.22",
    "@types/react-dom": "16.8.4",
    "array-move": "^2.2.1",
    "axios": "^0.18.1",
    "closest": "0.0.1",
    "crc": "^3.8.0",
    "dagre": "^0.8.5",
    "draft-js": "^0.11.5",
    "immutability-helper": "^3.0.2",
    "inversify": "^5.0.1",
    "inversify-binding-decorators": "^4.0.0",
    "inversify-inject-decorators": "^3.1.0",
    "inversify-react": "^0.4.3",
    "lodash": "^4.17.15",
    "material-table": "^1.57.2",
    "mathjs": "^6.6.4",
    "moment": "^2.24.0",
    "msal": "^1.2.2",
    "normalizr": "^3.6.0",
    "office-ui-fabric-react": "^7.105.12",
    "pathfinding": "^0.4.18",
    "paths-js": "^0.4.10",
    "primeicons": "^2.0.0",
    "primereact": "^3.4.0",
    "query-string": "^6.12.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.0",
    "react-bootstrap-dialog": "^0.13.0",
    "react-contenteditable": "^3.3.4",
    "react-cool-img": "^1.0.24",
    "react-day-picker": "^7.4.0",
    "react-dnd": "^10.0.2",
    "react-dnd-html5-backend": "^10.0.2",
    "react-dom": "^16.13.1",
    "react-draggable": "^3.3.2",
    "react-dropzone": "^10.2.2",
    "react-iframe": "^1.8.0",
    "react-image": "^2.4.0",
    "react-loader-spinner": "^3.1.5",
    "react-notification": "^6.8.5",
    "react-notifications": "^1.6.0",
    "react-number-format": "^4.4.1",
    "react-on-images-loaded": "^2.2.3",
    "react-quill": "^1.3.5",
    "react-redux": "^7.2.0",
    "react-resizable-box": "^2.1.0",
    "react-router-dom": "^5.1.2",
    "react-router-global-history": "^1.1.0",
    "react-rte": "^0.16.1",
    "react-scripts": "^3.4.1",
    "react-scroll-ondrag": "^1.0.0",
    "react-select": "^3.1.0",
    "react-sortable-hoc": "^1.11.0",
    "react-split-pane": "^0.1.91",
    "react-toastify": "^5.5.0",
    "react-tooltip": "^3.11.6",
    "react-virtualized": "^9.21.2",
    "react-visibility-sensor": "^5.1.1",
    "redux": "^4.0.5",
    "redux-form": "^8.3.2",
    "redux-persist": "^6.0.0",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.3.0",
    "reflect-metadata": "^0.1.13",
    "resize-observer-polyfill": "^1.5.1",
    "sanitize-html": "^1.22.1",
    "tslint": "^5.20.1",
    "typescript": "3.5.2"
  },

[zhanbst]

it was because using

.canvas {
    position: inherit !important;
}

you need wrapper canvas with this style

html,
body,
#root {
	height: 100%;
	padding: 0;
	margin: 0;
}

I resolve it with absolute position

.app-wrapper {
   position: 'relative';
   width: '100%';
   height: 100%
}
.canvas-wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    position: absolute;
    background-size: 50px 50px;
    background-color: #9e9e9e;
    background-image: linear-gradient( 0deg, transparent 24%, rgba(250, 250, 250, 0.05) 25%, rgba(250, 250, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(250, 250, 250, 0.05) 75%, rgba(250, 250, 250, 0.05) 76%, transparent 77%, transparent ), linear-gradient( 90deg, transparent 24%, rgba(250, 250, 250, 0.05) 25%, rgba(250, 250, 250, 0.05) 26%, transparent 27%, transparent 74%, rgba(250, 250, 250, 0.05) 75%, rgba(250, 250, 250, 0.05) 76%, transparent 77%, transparent );
}

 render () {
   return <div className='app-wrapper'>
      <div className='canvas-wrapper'>
         <CanvasWidget engine={engine} />
     </div>
   </div>
 }

[Antoninecek]

I just close this issue due to inactivity (don’t know if resolved).