Bug: cannot target state in sibling parallel branch by ID

[matb33]

Bug or feature request?

Potentially a bug

Description:

When attempting to target a state by ID from one parallel branch in another parallel branch, the transition doesn't occur, but the onexit action does. Interestingly, the XState Visualizer draws an arrow correctly (but it does not work as intended).

(Bug) Expected result:

As far as I can understand in the SCXML spec (see 3.1.3 Parallel States, 2nd paragraph: https://www.w3.org/TR/scxml/#CoreIntroduction), it should be possible to target a state in a sibling parallel branch.

(Bug) Actual result:

Only the onexit action appears to occur. The intended transition does not work.

Link to reproduction or proof-of-concept:

https://codesandbox.io/s/festive-hamilton-0pr07

1. Click "Toggle Menu"
2. Click "Menu > Go to Dashboard"

This will log:

{"Pages":"About","Menu":"Closed"}
{"Pages":"About","Menu":"Opened"}
{"Pages":"About","Menu":"Closed"}

when what is expected is:

{"Pages":"About","Menu":"Closed"}
{"Pages":"About","Menu":"Opened"}
{"Pages":"Dashboard","Menu":"Closed"}

i.e., the event "go to dashboard": "#Dashboard" should be able to resolve the Dashboard state node, which has "id": "Dashboard".

As an aside, this works as intended in sketch.systems:

https://sketch.systems/matb33/sketch/eca5af52a7b0f8b6d3a2ed588708c817

[davidkpiano]

Workaround: instead of "go to dashboard": "#Dashboard", fire an event:

import { send } from 'xstate';

// ...

"go to dashboard": {
  actions: send("TO_DASHBOARD")
},

// ...

Pages: {
  states: { /* ... */ },
  on: {
    TO_DASHBOARD: '.dashboard'
  }
}

[matb33]

Thanks for the workaround idea. That was something we tried as well, but the problem is that when the "Menu" is "Closed", our design dictates that one shouldn't be able to emit the "go to dashboard" event. Only when the "Menu" is "Opened" should we be able to emit that event.