`isNonModal` prop in `<Popover />` (react-aria-components) is not working

[rafighajili]

Provide a general summary of the issue here

import { Button, Dialog, DialogTrigger, OverlayArrow, Popover, Switch } from "react-aria-components";

<DialogTrigger>
  <Button>Settings</Button>
  <Popover isNonModal>
    <OverlayArrow>
      <svg width={12} height={12} viewBox="0 0 12 12">
        <path d="M0 0 L6 6 L12 0" />
      </svg>
    </OverlayArrow>
    <Dialog>
      <div className="flex-col">
        <Switch defaultSelected>
          <div className="indicator" /> Wi-Fi
        </Switch>
        <Switch defaultSelected>
          <div className="indicator" /> Bluetooth
        </Switch>
        <Switch>
          <div className="indicator" /> Mute
        </Switch>
      </div>
    </Dialog>
  </Popover>
</DialogTrigger>

🤔 Expected Behavior?

since there is isNonModal prop, it should close on scroll, or on click outside.

😯 Current Behavior

it closes on scroll, but is not closing when clicking outside, or clicking button itself.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

i used the code on documentation, https://react-spectrum.adobe.com/react-aria/Popover.html. just added isNonModal prop.

Version

1.0.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I think you're looking for this https://react-spectrum.adobe.com/react-aria/Modal.html#dismissable

If you read the description of the prop you're trying to use, you'll notice it generally shouldn't be used as it can have a negative impact on accessibility. There are a few cases where it is appropriate, such as combobox, but there are not many of these situations.

[rafighajili]

I think you're looking for this https://react-spectrum.adobe.com/react-aria/Modal.html#dismissable

If you read the description of the prop you're trying to use, you'll notice it generally shouldn't be used as it can have a negative impact on accessibility. There are a few cases where it is appropriate, such as combobox, but there are not many of these situations.

no, isDismissable is for <Modal />. i need isNonModal work correctly when passing this prop on <Popover /> since it works on <ComboBox />, but it doesn't work as combobox's popover (combobox has isNonModal: true).

[snowystinger]

I do not quite follow. Are you building a combobox? or something else?

The example I shared will close on click outside. If you want a popover that closes on click outside, they already do that without needing to specify anything https://react-spectrum.adobe.com/react-aria/Popover.html

If the issue is that you want it to close when the user scrolls, we'd actually lie to determine how to get the combobox to also prevent scrolling and not close. That it closes right now is a bug #6609

[rafighajili]

I do not quite follow. Are you building a combobox? or something else?

The example I shared will close on click outside. If you want a popover that closes on click outside, they already do that without needing to specify anything https://react-spectrum.adobe.com/react-aria/Popover.html

If the issue is that you want it to close when the user scrolls, we'd actually lie to determine how to get the combobox to also prevent scrolling and not close. That it closes right now is a bug #6609

I need just popover component to be closed when clicking outside when i pass isNonModal prop, i shared the code on general summary.

[LFDanLu]

@rafighajili Mind expanding on why you are trying to use the isNonModal prop on the Popover? As @snowystinger mentioned, the Popover doesn't need that prop to close when someone clicks outside of it: https://codesandbox.io/p/sandbox/friendly-merkle-xwp52m?file=%2Fsrc%2FApp.js%3A10%2C23.

[rafighajili]

@rafighajili Mind expanding on why you are trying to use the isNonModal prop on the Popover? As @snowystinger mentioned, the Popover doesn't need that prop to close when someone clicks outside of it: https://codesandbox.io/p/sandbox/friendly-merkle-xwp52m?file=%2Fsrc%2FApp.js%3A10%2C23.

because by default, when i popover is opened, scrolling is being blocked. but when i pass isNonModal, i can scroll, and when i scroll, popover gets closed, which is expected result. but when i clock outside, it's not getting closed.

[LFDanLu]

I see, thank you for the additional information. The scrolling being blocked for Popovers is intentional, see #6070 (comment) for some additional links explaining the reasons for that. I would recommend you don't reach for isNonModal as a way to go around this behavior since as @snowystinger mentioned it can have a impact on accessibility behavior that is not appropriate for your Popover experience.

[rafighajili]

I see, thank you for the additional information. The scrolling being blocked for Popovers is intentional, see #6070 (comment) for some additional links explaining the reasons for that. I would recommend you don't reach for isNonModal as a way to go around this behavior since as @snowystinger mentioned it can have a impact on accessibility behavior that is not appropriate for your Popover experience.

Yeah got it, I also saw your point on documentation. But I have an exceptional case where popover should not block scrolling, and closes when I scroll, and when I click outside. That is why I used isNonModal prop. But on click outside doesn’t close popover. If you try the code that I wrote on general summary, you’ll see.

[LFDanLu]

I understand, but unfortunately for our library we don't support scrolling while a popover is open due to historical reasons laid out in #2926. The isNonModal prop has a very specific usage (i.e. combobox) and should not be used to bypass the scroll behavior blocking. Allowing scrolling while popovers are open could potentially be a discussion point but that is separate from the usage of isNonModal