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

machine.js

const CHANGE_ACTION = {
  target: 'FILTERING',
  actions: assign({
    selectedIndex: 0, // Highlight the first match
    inputValue: (_, event) => event.inputValue
  })
}

const NAVIGATE_ACTION = {
  target: 'NAVIGATING',
  actions: assign({
    selectedIndex: (_, event) => event.selectedIndex
  })
}

const SELECT_ACTION = {
  target: 'IDLE',
  actions: assign({
    selectedValue: (_, event) => event.selectedValue
  })
}


const machine = Machine({
  id: 'combobox',
  initial: 'IDLE',
  context: {
    inputValue: '',
    selectedValue: '',
    selectedIndex: 0
  },
  states: {
    IDLE: {
      entry: assign({ selectedIndex: 0 }),
      on: {
        OPEN: 'INTERACTING',
        CHANGE: CHANGE_ACTION,
        RESET: {
          target: 'IDLE',
          actions: assign({
            inputValue: (_, event) => event.inputValue
          })
        },
        CLEAR: {
          target: 'IDLE',
          actions: assign({
            inputValue: '',
            selectedValue: ''
          })
        }
      }
    },
    INTERACTING: {
      on: {
        CLOSE: 'IDLE',
        CHANGE: CHANGE_ACTION,
        SELECT: SELECT_ACTION,
        NAVIGATE: {
          ...NAVIGATE_ACTION,
          target: 'INTERACTING'
        }
      }
    },
    NAVIGATING: {
      on: {
        CLOSE: 'IDLE',
        CHANGE: CHANGE_ACTION,
        SELECT: SELECT_ACTION,
        NAVIGATE: NAVIGATE_ACTION
      }
    },
    FILTERING: {
      on: {
        CLOSE: 'IDLE',
        CHANGE: CHANGE_ACTION,
        SELECT: SELECT_ACTION,
        NAVIGATE: NAVIGATE_ACTION
      }
    }
  }
})