[IndexFilters] Filter popover does not close when clicked outside of when the Index is within a Modal
brandon-yetman opened this issue · 4 comments
Summary
If the index table / filters component is wrapped by a modal (e.g. my use-case, and index table in the Settings section of Admin, which afaict is a modal component), the popover does not close when clicked outside of. In contrast, the Sort popover does close when clicked outside of.
cc @Shopify/polaris-eng
Expected behavior
Filter popover should close when clicked outside of.
Actual behavior
Video recording
Screen.Recording.2024-04-05.at.2.27.54.PM.mov
Steps to reproduce
- Add any filter
- Try to click anywhere else to close the filter popover
Are you using React components?
Yes
Polaris version number
latest
Browser
Chrome
Device
Macbook
@brandon-yetman are you able to contribute a fix?
@alex-page I'm happy to try when I have some bandwidth, but between a tight project deadline and upcoming vacation I probably won't have time to dive into it for ~a month
@brandon-yetman I think if you set the prop closeOnChildOverlayClick={true} on IndexFilters, it'll work https://codesandbox.io/p/sandbox/eager-dew-25k74k?file=%2FApp.tsx%3A360%2C30
Solved by Sophie's suggested fix :)