Xstate: Multiple targets sample from Docs doesn't work

[DzmitrySvirydzenka]

Description

A sample for multiple targets from this document (Multiple Targets) as is doesn't work in neither XState Visualizer nor Node.js:

const settingsMachine = Machine({
  id: 'settings',
  type: 'parallel',
  states: {
    mode: {
      initial: 'active',
      states: {
        inactive: {},
        pending: {},
        active: {}
      }
    },
    status: {
      initial: 'enabled',
      states: {
        disabled: {},
        enabled: {}
      }
    }
  },
  on: {
    // Multiple targets
    DEACTIVATE: ['.mode.inactive', '.status.disabled'] // !!! DOES NOT WORK !!!
    // Can also be coded as...
    // DEACTIVATE: {
    //   target: ['.mode.inactive', '.status.disabled']
    // }
  }
});

Expected Result

Raising 'DEACTIVATE' event should pass the machine to state:

{
  "mode": "inactive",
  "status": "disabled"
}

Actual Result

The state does not change

Reproduction

Just run the sample in XState Visualizer

Additional context

Everything works well with:

DEACTIVATE: {
  target: ['.mode.inactive', '.status.disabled']
}

Re: this is actually not the only broken sample. I will be better to consider test coverage for all documented samples in order to decrease learning curve time

[davidkpiano]

Did you try this with xstate@next?

[Andarist]

@davidkpiano Not working correctly on next either - https://codesandbox.io/s/ecstatic-cloud-vhxfw . We transition only to first listed target - gonna look into fixing this over the weekend.

[Andarist]

Actually - my bad as it's super easy mistake those 2 patterns.

{
  on: {
    DEACTIVATE: ['.mode.inactive', '.status.disabled'] 
  }
}

This is not a transition with 2 targets, but rather 2 separate transitions - where both are unguarded so the first one is always taken as it always "wins".

The mistake in the docs has been fixed some time ago - https://github.com/davidkpiano/xstate/blob/586e28c01bb8b55e524f6f8834b885e326315983/docs/guides/transitions.md#multiple-targets , but it wasn't deployed yet.

Also - the development warning has been implemented to surface such errors to users, but it's part of the 4.7 - which is currently at the RC stage and didn't hit the stable release yet.

[DzmitrySvirydzenka]

Actually - my bad as it's super easy mistake those 2 patterns.

{
  on: {
    DEACTIVATE: ['.mode.inactive', '.status.disabled'] 
  }
}

This is not a transition with 2 targets, but rather 2 separate transitions - where both are unguarded so the first one is always taken as it always "wins".

The mistake in the docs has been fixed some time ago - https://github.com/davidkpiano/xstate/blob/586e28c01bb8b55e524f6f8834b885e326315983/docs/guides/transitions.md#multiple-targets , but it wasn't deployed yet.

Also - the development warning has been implemented to surface such errors to users, but it's part of the 4.7 - which is currently at the RC stage and didn't hit the stable release yet.

Hi Andarist,

Thanks for the explanation! It looks reasonable!
But are you completely sure about this? I'm quite new in XState and the logic is not completely clear for me yet but... If i'm rewriting code in guarded manner like this:

    DEACTIVATE: [
      { target: 'mode.inactive' },
      { target: '.status.disabled'}
    ]

then it start working like you described - moves the machine to only the first target, but originally it just does nothing, which is not completely logical and expected, I believe. Can you please clarify this little bit?

[Andarist]

then it start working like you described - moves the machine to only the first target, but originally it just does nothing, which is not completely logical and expected, I believe. Can you please clarify this little bit?

Well - seems like some bug in current 4.6.x release. You can check out how this behaves in next version - https://codesandbox.io/s/clever-turing-glgk6

[DzmitrySvirydzenka]

Ok, I see now. Thank you for the clarification!