onDone of the parent machine could not be triggered after the state of child machine reach the final

[tzurae]

Description

I have two machines

1. auth machine ( parent )
2. sign-in machine ( child )

from the document, onDone of the parent machine should be triggered after the child machine reaches the final.
I'm pretty sure the final state of the child machine has reached by logging some words, but nothing happens.
I've been working on the problems for hours, please help me

Expected Result

I expected the state(getMeAndQuotaLoading) of the parent machine should be triggered.

Autual Result

Nothing happens

Auth machine

const authMachine = Machine<any, any, any>(
  {
    id: 'authentication',
    initial: 'init',
    context: {
      user: undefined,
      loggedIn: false,
    },
    states: {
      init: {
        on: {
          NON_AUTH: {
            target: 'signIn',
          },
          AUTH: {
            target: 'authorized',
            actions: 'setLoggedIn',
          },
        },
      },
      signIn: {
        entry: log('enter signIn state'),
        invoke: {
          id: 'signIn',
          src: LoginInMachine,   // <-----------------------------------------Login Machine
          onDone: 'getMeAndQuotaLoading',
          onError: { target: 'unauthorized', actions: 'onError' },
        },
      },
      authorized: {
        entry: log('enter authorized state'),
        // entry: 'redirectHomeAfterLogin',
        on: {
          GET_ME_AND_QUOTA: 'getMeAndQuotaLoading',
          UPDATE: 'updating',
          REFRESH: 'refreshing',
          LOGOUT: 'logout',
        },
      },
      getMeAndQuotaLoading: {
        entry: [log('wtfffffffffffffffffff'), 'redirectDashboard'],
        invoke: [{
          src: 'getMe',
          onDone: {
            target: 'authorized',
            actions: 'setMe',
          },
        }, {
          src: 'getQuota',
          onDone: {
            target: 'authorized',
            actions: 'setQuota',
          },
        }],
      },
     ...etc

Login Machine

const LoginInMachine = Machine<any, any, any>({
  id: 'signIn',
  initial: 'dataEntry',
  context: {
    account: '',
    password: '',
  },
  states: {
    dataEntry: {
      entry: log('enter sign in machine'),
      on: {
        ENTER_ACCOUNT: {
          actions: 'saveAccount',
        },
        ENTER_PASSWORD: {
          actions: 'savePassword',
        },
        SUBMIT: [{
          cond: isInputEmpty,
          target: 'failure',
        }, {
          cond: isEmailWrongFormat,
          target: 'failure',
        }, {
          target: 'loading',
        }],
      },
    },
    loading: {
      invoke: {
        src: 'requestSignIn',
        onDone: {
          target: 'success',
        },
        onError: [{
          cond: 'isTimeoutError',
          target: 'failure_for_time_out',
        }, {
          target: 'failure',
        }],
      },
    },
    success: {
      type: 'final',   <----------------------- Final here
    },

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given. It's much easier to answer questions like this by looking at the problem reproduced.

[davidkpiano]

You can use this: CodeSandbox (XState template) to make your reproduction.