multiple dropdowns menus on screen, wrong one is focused

[yurique]

https://codesandbox.io/s/headlessuireact-menu-example-forked-ejnc9

When there are multiple dropdown menus on the screen:

• open the first dropdown
  

• open the second one -- the first one gets closed, but the first button receives the focus
  

• try arrow keys on the keyboard -- the first dropdown gets open and receives the keystrokes; the second dropdown remains open
  

[yurique]

I think this is related to this logic: https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/src/components/menu/menu.tsx#L235

Which makes sense, when a user clicks out of the dropdown, thus closing it. I'd be happy to make a PR for this, just not sure how to check if another dropdown got open (to skip the focusing part).

[mryechkin]

I can replicate this issue as well. Good catch @yurique!

[yurique]

this one seems to be very related: #114

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Can you test if it still happens with yarn add @headlessui/react@dev?

[mryechkin]

Hey @RobinMalfait - that looks to have fixed it for me! 🎉

[mryechkin]

@RobinMalfait I'm getting this error with Transition now using "@headlessui/react": "0.0.0-2472521", and the transitions themselves are broken:

Warning: Unexpected ref object provided for div. Use either a ref-setter function or React.createRef().

<Transition
    show={isOpen}
    enter="transform transition ease-in-out duration-700 sm:duration-700"
    enterFrom="translate-x-full"
    enterTo="translate-x-0"
    leave="transform transition ease-in-out duration-700 sm:duration-700"
    leaveFrom="translate-x-0"
    leaveTo="translate-x-full"
>
  {(ref) => (
    <div ref={ref} className="...">
      ...
    </div>
  )}
</Transition>

Wasn't sure if I should log a separate issue, since this is a dev build? Thanks!

[RobinMalfait]

@mryechkin The API changed of the Transition component but I didn't document it yet. We made sure that the API is consistent between all components we use. I will make sure to document and release a new version ASAP.

The TL;DR is this:

• We always render a div for the Transition and Transition.Child components. Unless you change that behaviour by adding an as or similar prop.
• You can still use a render function, but we don't passthrough any data, so the ref that you used is undefined in this case.
• If you really need a ref for some reason, then you can use custom component with forwardRef (https://reactjs.org/docs/forwarding-refs.html) and use as={MyCustomComponent}