Wrong event triggered when clicking an item when openMenu is called on input focus with useCombobox

[caioblasio]

Problem description:

There is an issue with the example described in the docs here. The codesandbox from the example.

Using useCombobox, If you call openMenu on input focus and click an item you get the __function_open_menu__ event with instead of the correct __item_click__ event.

By removing the call to openMenu on input focus, you get the correct __item_click__ event.

• downshift version: 6.1.7
• node version: 14.19.2
• npm (or yarn) version: 6.14.17

Relevant code or config

Using the useCombobox hook and providing an onStateChange function

const {
    isOpen,
   // ...
  } = useCombobox({
    onStateChange: (event) => {
      console.log(event)
    },
    // ...
  })

If you call openMenu on input focus

<input
    {...getInputProps({
      onFocus: () => {
        openMenu()
      },
    })}
 />

if you click an item in the dropdown you get a wrong event

onStateChange:  (event) => {
    console.log(event)
    // What you get:
    // {type: "__function_open_menu__", selectedItem: "The item", inputValue: "The input value"}

    // What you should get:
    // {type: "__item_click__", highlightedIndex: -1, isOpen: false, selectedItem: "The item", inputValue: "The input value"}
  }

What you did:

• Provided an onStateChange function to useCombobox instance
• Called openMenu on input focus
• Clicked an item in the dropdown

What happened:

By clicking an item in the list, you get the __function_open_menu__ event with a selectedItem property instead of the correct __item_click__ event

Reproduction repository:

Check this codesandbox to see the issue