Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: When child state transitioned to final state, did not trigger onDone event and transition to next state #4858

Open
lvchenyang opened this issue Apr 17, 2024 · 0 comments
Labels

Comments

@lvchenyang
Copy link

lvchenyang commented Apr 17, 2024

XState version

XState version 5

Description

The state machine define:

const machine1 = createMachine({
  id: "machine1",
  initial: "idle",
  states: {
    idle: {
      on: {
        START: {
          target: "finished",
        },
      },
    },
    finished: {
      type: "final",
    },
  },
});

const machine2 = createMachine({
  id: "machine2",
  initial: "idle",
  states: {
    idle: {
      on: {
        START: {
          target: "finished",
        },
      },
    },
    finished: {
      type: "final",
    },
  },
});

const parentMachine = setup({
  actors: {
    machine1,
    machine2
  }
}).createMachine({
  id: "parent",
  initial: "step1",
  states: {
    step1: {
      invoke: {
        src: machine1,
        onDone: {
          target: "step2",
        },
      },
    },
    step2: {
      invoke: {
        src: machine2,
      },
      type: "final",
    },
  },
});

Child Component

interface ChildComponentProps {
  machine: AnyStateMachine;
  children: ReactNode;
}
const ChildComponent = ({ machine, children }: ChildComponentProps) => {
  const [state, send] = useActor(machine);
  console.log("Child State:", state.value);
  const handleClick = () => {
    send({ type: "START" });
  };
  return <button onClick={handleClick}>{children}</button>;
};

ParentComponent

function App() {
  const [state] = useActor(parentMachine);

  console.log("Parent State:", state.value);
  return (
    <>
      {state.value === "step1" && (
        <ChildComponent machine={machine1}>Child Machine 1</ChildComponent>
      )}
      {state.value === "step2" && (
        <ChildComponent machine={machine2}>Child Machine 2</ChildComponent>
      )}
    </>
  );
}

The question is when Child Machine 1 button clicked, child state transitioned to final state, but parent state machine has no state transitions.

Expected result

Child Machine 1 button clicked, show Child machine 2 button.

Actual result

Always show Child Machine 1 button.

Reproduction

https://codesandbox.io/p/sandbox/child-state-example-2d5q5n

Additional context

No response

@lvchenyang lvchenyang added the bug label Apr 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant