Nested Popover Closes

import { NestedPopovers, NestedPopoversWorking, } from '@/demos/NestedPopovers.demo'; import { Layout } from '@/layout';

export const meta = { title: 'My Popover dropdown closes when I click on the dropdown of a nested Popover', description: 'Popover dropdown is closed when it detects click-outside events', slug: 'nested-popover-closes', category: 'components', tags: ['popover', 'menu', 'DatePicker', 'Select'], created_at: 'September 8, 2024', last_updated_at: 'September 8, 2024', };

export default Layout(meta);

Nested popovers

By default, all popovers and dropdowns are rendered within the Portal component, which is attached to the document.body. This allows popovers to be rendered on top of all other elements and to be positioned correctly even if the parent element has overflow: hidden.

The Popover component uses the use-click-outside hook to detect clicks outside of the popover. When you click on the nested popover, it detects that click as an outside click and closes the parent popover. This happens with every component that uses Popover under the hood, including DatePicker, Select, Menu, and others.

Example of the issue:

<Demo data={NestedPopovers} />

How to fix

To fix the issue, set the withinPortal={false} prop on the nested popover. Note that this option might be a part of another prop (for example, comboboxProps in Select). To learn which prop to use, check the documentation of the component you are using.

Example of the fixed issue:

<Demo data={NestedPopoversWorking} />