Visual editor nodes lose focus

[mattbieber-lark]

Just noticed this today, but then I'm a bit new to the visual editor. Selecting a node (Event, State) in the editor will focus it for a split second and then lose focus as if you had clicked out of the object. I saw this mentioned by others in Discord so am logging an issue. It seems to have some correlation to the side panes having been opened. Note: I ruled out an extension conflict by disabling all but the Stately one.

Macbook Pro w/ M1 chip

.

[mattbieber-lark]

no one?

[davidkpiano]

This is only happening in the VS Code extension, correct?

[mattbieber-lark]

Correct @davidkpiano. If it's not something affecting a bunch of people it's probably on my end. I'll debug and post my findings here for others.

[bcdrme]

I'm surprised no one else is talking about this issue. Not only does it lose focus when clicking nodes, but also when editing the machine. I think its every time it wants to save the machine in the .ts file, it loses focus.

It's very annoying, the vscode editor is barely usable.

[Andarist]

Not only does it lose focus when clicking nodes,

Could you try to record a short video that would showcase the problem? Or at least describe the whole scenario in detail? I would be interested in knowing where you click and what you expect to be focused and when.

but also also when editing the machine.

Where do you edit it? Do you refer to the fact that touching the code of the machine might "unselect" the node in the Studio?

I think its every time it wants to save the machine in the .ts file, it loses focus.

I can definitely see this happening, since I'm reworking the relevant parts of the code I will try to fix this while doing so.

[bcdrme]

Here I'm trying to type "Trying to name this state". As you can see, it loses focus.

Focus is lost

I'm pretty sure the issue is : debounce on the input kicks off -> it triggers "generate the machine code" -> machine code is saved to the .ts file -> TS file has changed, reload the Studio.

In 1.9.0, a feature has been added : #188 e54ce0d Thanks @mellson! - Changes made outside VS Code are now sent to the visual editor.

So, maybe its related ?

[davidkpiano]

@bcdrme That's very likely the issue. The most probable fix is to avoid sending changes to VS Code until you've "committed" the change (e.g. by blurring the input).

[davidkpiano]

Tracking in Linear: https://linear.app/statelyai/issue/STA-2201

[bcdrme]

Disabling the autosave feature from vscode is a workaround

[Andarist]

I believe that I've fixed the issue in one of our dependencies that was causing this: https://github.com/chakra-ui/chakra-ui/pull/6863