Back to all questions

My Popover dropdown closes when I click on the dropdown of nested Popover

Last updated

Nested popovers

By default, all popovers and dropdowns are rendered within 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 parent element has overflow: hidden.

Popover component uses use-click-outside hook to detect clicks outside of the popover. When you click on the nested popover, it detects that click as 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:

import { Button, Popover, Select } from '@mantine/core';
import { InputBase } from '@mantine/core';

function Demo() {
  return (
    <Popover width={200} position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <Select
          placeholder="Choose your framework"
          data={[
            { value: 'react', label: 'React' },
            { value: 'vue', label: 'Vue' },
            { value: 'angular', label: 'Angular' },
          ]}
        />
      </Popover.Dropdown>
    </Popover>
  );
}

How to fix

To fix the issue, set withinPortal={false} prop on the nested popover. Note that this option might be a part of the other 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:

import { Button, Popover, Select } from '@mantine/core';
import { InputBase } from '@mantine/core';

function Demo() {
  return (
    <Popover width={200} position="bottom" withArrow shadow="md">
      <Popover.Target>
        <Button>Toggle popover</Button>
      </Popover.Target>
      <Popover.Dropdown>
        <Select
          comboboxProps={{ withinPortal: false }}
          placeholder="Choose your framework"
          data={[
            { value: 'react', label: 'React' },
            { value: 'vue', label: 'Vue' },
            { value: 'angular', label: 'Angular' },
          ]}
        />
      </Popover.Dropdown>
    </Popover>
  );
}