Downshift: [useCombobox] Attaching `openMenu` to input's `onFocus` open and directly close menu on input's focus

[wab]

• downshift version: 5.2.2
• node version:
• npm (or yarn) version:

Relevant code or config

const {
    isOpen,
    getMenuProps,
    getInputProps,
    getItemProps,
    openMenu
  } = useCombobox({
    items
  });

  return (
    <div className="App">
      <input
        {...getInputProps({
          onFocus: openMenu
        })}
      />
      <div {...getMenuProps()}>
        {isOpen &&
          items.map((item, index) => (
            <div
              {...getItemProps({
                key: item.id,
                item,
                index
              })}
            >
              {item}
            </div>
          ))}
      </div>
    </div>
  );

What you did:

Attach openMenu to input's onFocus handler in order to open the menu on focus the input

What happened:

Menu is open and directly close after the component re-render.

Reproduction repository:

https://codesandbox.io/s/nice-allen-tlvw9?file=/src/App.js

Problem description:

Suggested solution:

[TrySound]

You forgot to spread container props

-    <div className="App">
+    <div className="App" {...getComboboxProps()}>

https://codesandbox.io/s/morning-leftpad-ro9im?file=/src/App.js

[wab]

thanks for the clarification. 👍

[TrySound]

@silviuaavram Should downshift warn when root ref is not set?

[jwld]

Yes agree, some sort of warning would be great. Just spent a good 2 hours wrestling this exact issue 😅

[silviuaavram]

We should have warnings displayed, yes. There is another task for errors but this is for controlled-uncontrolled switch. https://github.com/downshift-js/downshift/issues/974

To be fair, all the examples have getComboboxProps and explain why this (or Downshift's getRootProps are needed). But yes, adding warnings is a great idea. I will keep this issue to track it.

[jwld]

@silviuaavram It's not particularly clear on this page, which is where I first went to learn the useCombobox hook. It's in the examples but very easy to miss - it's only explained way down at the bottom of the page.

[silviuaavram]

I agree that the documentation needs improvements. So I am always happy to receive PRs with improvements. This info should also be consistent between Downshift and useCombobox. If you have suggestion improvement please, create a PR :)

[silviuaavram]

:tada: This issue has been resolved in version 5.4.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: