[Dropdown] How to call the "close" function by hand?

[gustaveWPM]

Hello,

In a project, I have a Dropdown which only displays on my mobile version.
I would like to make it disappear when the screen is resized to be large after it has been opened.

I've started to write some code:

const isLargeScreen = useMediaQuery(`(min-width: ${getBreakpoint('lg')}px)`);
const handleOpenChange = (opened: boolean) => setIsMenuOpen(opened);

// * ... (1)
useEffect(() => {
  if (isLargeScreen) setIsMenuOpen(false);
}, [isLargeScreen]);

return (
  <Dropdown
    showArrow={true}
    backdrop="blur"
    closeOnSelect={false}
    onOpenChange={handleOpenChange}
    // * ...

I would like to know what I should append to the (1) useEffect. ^^'

[gustaveWPM]

EDIT:

The standard way is to append the isOpen property to the Dropdown element:

    <Dropdown
      isOpen={isOpened} // * ... Here!
    // * ...

---

I hacked it like this for now:

    <Dropdown
      showArrow={true}
      closeOnSelect={false}
      onOpenChange={handleOpenChange}
      className="py-1 px-1 border dark:border-black dark:bg-slate-950"
      classNames={{ arrow: 'dark:bg-slate-800' }}
      key={`dropdown-hack-in-the-matrix-${isLargeScreen}`}
    >

Here, the key attribute will change the React Component Tree when the screen switch from large to small, and from small to large.
This cause a re-render, which will reset the Dropdown, and draw it again with its initial state (so: closed).

Btw: thanks to this magic, the backdrop effect will also reset!

Even if it is absolutely not standard, I will select this message as answer for now.
Don't hesitate to provide a less hackish solution.

Note: this answer has been inspired from a discussion with the kapa.ai instance of the NextUI Discord server.

---

A good resource to understand why this hack works so good (even if it has the drawback to trigger a full re-mount...):
https://youtu.be/76OedwmXlYY?t=692

(11:32)

[jrgarciadev]

Hey @gustaveWPM the Dropdown component is based on the Popover, which means that you can control the open state by using the isOpen property https://nextui.org/docs/components/popover#controlled

[gustaveWPM]

Yep, but I mean, a standard way for your users.

[jrgarciadev]

We didn't modify the popover API, It has the same base attributes. isOpen, defaultOpen and onOpenChange, you can check the API https://nextui.org/docs/components/popover#api.

You don't need any hacks to control the open state

[gustaveWPM]

Okay.
But I still don't understand how to properly solve my current issue without triggering useless re-mounts.

Let's say I have a dropdown menu which is displayed when I click on it in the desktop version, but which should not be present in the mobile version.

I click to open this dropdown, then I resize the screen, which causes me to switch to mobile mode (so the dropdown must be closed AND hidden).

What can I do so that I don't have to trigger a complete re-mount of this dropdown when I change the size of my window, but simply play on its "hidden" class AND force it to close (which also includes cancelling the current backdrop effect)?

[gustaveWPM]

Oh, sorry, I read

Hey @gustaveWPM the Dropdown component is based on the Popover, which means that you can't control the open state by using the isOpen property https://nextui.org/docs/components/popover#controlled

Instead of "can".

Well...
It's weird, even if I change isMenuOpen via setIsMenuOpen(false) in my useEffect, this doesn't close the popover. :/
(And this is what led me to create this discussion, lol.)

[gustaveWPM]

@jrgarciadev Wow, I think I need a vacation.
In fact, it was I who misunderstood.

I wasn't using the isOpen property and that's why the state of my component wrapping the dropdown wasn't linked. :/

You were right from your first message...
I just misread it.

Now, I've understood and it is indeed dead-simple.

In fact, I just need to turn this:

    <Dropdown onOpenChange={handleOpenChange}>

Into this:

    <Dropdown isOpen={isOpened} onOpenChange={handleOpenChange}>

Sorry, I lost my head a bit on that one.