Generated by XState Viz: https://xstate.js.org/viz

machine.js

  const optimisticInputMachine = initial => Machine({
    id: 'optimisticInput',
    initial: 'idle',
    context: {
      value: initial,
      savedValue: initial,
    },
    states: {
      idle: {
        on: {
          FOCUS: 'focused'
        }
      },
      focused: {
        initial: 'pristine',
        states: {
          pristine: {
            on: {
              SUBMIT: '#optimisticInput.idle'
            }
          },
          dirty: {
            on: {
              SUBMIT: '#optimisticInput.submitting'
            }
          },
        },
        on: {
          CHANGE: {
            target: '.dirty',
            actions: 'update'
          },
          CLEAR: {
            target: '.dirty',
            actions: 'clear'
          },
          BLUR: {
            target: '#optimisticInput.idle',
            actions: 'reset'
          }
        }
      },
      submitting: {
        on: {
          RESOLVE: {
            target: 'idle',
            actions: 'save',
          },
          REJECT: {
            target: 'idle',
            actions: 'reset',
          }
        }
      }
    }
  }, {
    actions: {
      update: assign({ value: (ctx, e) => e.payload}),
      clear: assign({ value: null }),
      reset: assign({ value: (ctx, e) => ctx.savedValue}),
      save: assign({ savedValue: (ctx, e) => e.payload}), 
    }
  });
  optimisticInputMachine("Some ID")