Cannot transition a stopped machine

[RIP21]

Any idea what can trigger this error?
It happens to me more 100% of the time in the following scenario.
A dialog opens via effect (using an open function from the Dialog.Context), then I close it, and then when I change something in my app that triggers the global suspense boundary so I get a black screen for a second (as all app depends on that), I have a blink of the Backdrop once I'm exiting fallback to the content with the backdrop staying on the screen eventually making the site unusable.

I thought that it's this effect that gets triggered for some reason and then I get into the weird state of not having Dialog open but Backdrop only. But it's not getting triggered.

What's interesting, is that if I just open this same Dialog using the button trigger, and not the open function, and then do the same state transition that I described above, nothing like that happens.

[segunadebayo]

Can you share a minimal reproduction for this? Sounds like the dialog was somehow in a wrong state.

[RIP21]

I wish. I'll try if it will be coming back to us after some changes we plan to make (we want to avoid this full black screen scenario and show granular loaders). But if it will disappear, I'll likely not :)
It's just scenario is so random, I have no clue how to replicate it in isolation.
Wondering if I can console output the state of the dialog somehow by just inserting some logs into the zag/ark compiled files that may help make a better guess.

Ideas what place for this logging will be the best?

[segunadebayo]

Here’s the line you’re looking for:

zag/packages/core/src/machine.ts

Line 748 in fdd9c1e

public transition = (state: TState["value"] | S.StateInfo<TContext, TState, TEvent> | null, evt: S.Event<TEvent>) => {

Try to log the “state” and “event”. See what the values are. It should give a clue.

It’s very likely that the Dialog had unmounted but still received an “open” event from your code.

[rijvanmohd]

Hey @segunadebayo ,
we are also facing same issue in tests while implementing Dialog in our codebase.
we are using React 18.3.1, @ark-ui/react 3.3.0, vite 5.1.6 and vitest 1.5.0. we are using Remix 2.8.1 with SSR and pandacss 0.39.1 if that helps.

getting [@zag-js/core > transition] Cannot transition a stopped machine in tests.

Here's the dialog implementation -

 <Dialog.Root
            lazyMount
            unmountOnExit
            open={displayModal}
            modal={false}
        >
            <Portal>
                <Dialog.Backdrop />
                <Dialog.Positioner
                    onClick={onClose}
                >
                    <Dialog.Content
                        aria-labelledby={rest['aria-label']} 
                        onClick={handlePropagation}
                        {...rest}
                    >
                        {!noHeader && (
                            <Dialog.Title>
                                <Label>
                                    {modalHeader}
                                </Label>
                                <Button.Base
                                    className={closeButtonClass}
                                    variant="close"
                                    onClick={onClose}
                                    ariaLabel="Close"
                                    hoverColor={closeButtonHoverColor}
                                />
                            </Dialog.Title>
                        )}

                        <Dialog.Description>
                            modalBody                                
                        </Dialog.Description>
                    </Dialog.Content>
                </Dialog.Positioner>
            </Portal>
        </Dialog.Root>

While running the tests, we faced pointer-events Error: Unable to perform pointer interaction as the element has 'pointer-events: none': since aria-hidden: true got added to positioner and backdrop. to fix that, we added modal={false}

We also tried adding the CloseTrigger but that also didn't work.
Also, logged the event which comes

{ type: 'CLOSE', src: 'interact-outside' }

earlier but when we closed all the dialogs before exiting from tests, it became mounted

The above code seems working in tests if we remove the Portal so we though maybe a patch will work so we added const isServer = globalThis?.process?.env?.VITEST ? false : useIsServer(); in portal.js file.

But the issue is still persistant. It seems the issue is happening when we have two dialogs which are getting rendered just after other like the loading and success/error which is getting rendered based on the api status.

any idea what we are doing wrong here?

[ivancuric]

I ran into the same issue, and it was caused by a Tooltip on a controlled Modal component. It doesn't happen every time, which means that this is a race condition.

The close button actually unmounted the entire widget written in SolidJS, but I'm pretty sure that the same would happen if the portal was just conditionally rendered. I tried to make a repro on StackBlitz but I couldn't repro it there. Like I said, it's probably a race condition.

What I did was wrap the dismount in a setTimeout(,0) which mitigated this issue.