Calling diagram.select(node) freezes keyboard input until you click away from the selected node. Native js handlers outside of gojs work just fine, but diagram.commandHandler.doKeyDown suddenly stopped triggering.
Im guessing it’s locking in some way. But how and why?
What do you mean by this?
Native js handlers outside of gojs work just fine, but
diagram.commandHandler.doKeyDownsuddenly stopped triggering.
If you debug it, what does the stack show?
I mean that I have another keydown listener active outside of gojs like this: document.addEventListener("keydown", this._handleKeyDown);. It’s running in the component that’s a parent of the diagram (I’m using React).
The listeners do not interfere because besides this issue it works just fine.
During debugging I was able to locate the issue and it’s diagram.select(node). It works fine when I remove it.
OK, so what additional relevant information have you discovered while debugging this?
I did not debug gojs. I only debugged my own code and that’s all I found that’s relevant. Nothing else is happening in that code that could possibly cause any problems (it’s a function for adding a node so basically it just updates the nodeDataArray in state besides that)
So selecting a node causes a node data object to be added to the model? And that would cause a Node to be added to the Diagram. Might that new Node be getting selected?
My external keydown listener is triggering a function that adds a node as a child of the currently selected node. Then the newly created node is selected so when another click happens it acts as the parent node.
So this works but I also do have other functionality triggered from commandHandler.doKeyDown. It works perfectly fine but after selecting the new node it suddenly stops working at all. doKeyDown does not even execute.
It still sounds like an infinite recursion. That’s why I was suggesting that you try to debug it, to see what’s on the stack.
Okay so I did console.trace() after the diagram.select(). Result:
addNodeFromSelection @ DiagramWrapper.tsx:631
componentDidUpdate @ DiagramWrapper.tsx:79
commitLifeCycles @ react-dom.development.js:19835
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:471
add @ App.tsx:320
App._handleKeyDown @ App.tsx:157
_handleKeyDown() is the handler outside of gojs I told you about. It triggers add() which triggers my function addNodeFromSelection() in diagram but it does so by updating a flag in DiagramWrapperProps. Not really the best method but it works.
Then after the execution of all this I did console.trace() once again manually and it returned undefined so the stack is empty by the time error occurs.
I don’t see any recursion at least not there
You spoke of the diagram “freezing”, i.e. being unresponsive. So at that time there is nothing on the stack?
And what is the Diagram.currentTool in that state?
Also, are you making sure the diagram has focus after adding and selecting the new node? Otherwise CommandHandler.keyDown won’t fire until you focus the diagram. I ask because you mentioned that CommandHandler.keyDown starts firing after you deselect the node.
Here’s an example based on gojs-react-basic: Diagram.select w/ keyDown - CodeSandbox
The “Add Node” button will add and select a node, and the custom CommandHandler.keyDown (which alerts upon an Escape keypress) still fires after that.