Open majornista opened 1 year ago
We discussed this some more today, there might be a couple of problems that I hadn't considered previously:
isNonModal
popovers (i.e. ComboBox) may end up preventing the user from clicking into the ComboBox input to move the text cursor while the popover is open. This might be a non-issue since I think the underlay is rendered independently of the usePreventScroll options changes in usePopover, but I haven't taken a closer look yet to confirm.I'll investigate today.
@LFDanLu See https://github.com/adobe/react-spectrum/pull/3809 to test Storybook examples before and after the simple fix:
To test behavior before any fix, open the new Storybook example for a ComboBox with fixed positioning: https://reactspectrum.blob.core.windows.net/reactspectrum/82d74597a0176141733a4c2366392f39ebe7811d/storybook/index.html?path=/story/combobox--fixed-positioning&providerSwitcher-express=false&providerSwitcher-toastPosition=bottom
Expand the ComboBox and scroll the page using the mouse wheel.
The listbox will scroll with the underlying content.
To test the behavior with a simple fix that does not disable usePreventScroll within usePopover when isNonModal={true}, open the same Storybook example with the fix applied: https://reactspectrum.blob.core.windows.net/reactspectrum/e2856408a3291ed37397f721e22393b587b52d39/storybook/index.html?path=/story/combobox--fixed-positioning&providerSwitcher-express=false&providerSwitcher-toastPosition=bottom
Expand the ComboBox and scroll the page using the mouse wheel.
The page will not scroll when the Iistbox is expanded.
We discussed this some more today, there might be a couple of problems that I hadn't considered previously:
- Preventing scroll for
isNonModal
popovers (i.e. ComboBox) may end up preventing the user from clicking into the ComboBox input to move the text cursor while the popover is open. This might be a non-issue since I think the underlay is rendered independently of the usePreventScroll options changes in usePopover, but I haven't taken a closer look yet to confirm.- This might break the iOS experience for ComboBoxes/SearchAutocompletes since usePreventScroll does some touch event stuff to prevent scrolling.
I'm not noticing any difference in behavior, besides preventing scroll of the page, between the ComboBox the prevents scroll and that which does not. I can still position the cursor within the input using either the keyboard or the mouse, and the iOS experience seems unchanged.
Hey, any updates regarding this?
π Bug Report
A non-modal popover allows page and popover to scroll even when the target is fixed.
The new documentation search box feature in development includes a SearchAutocomplete combo box in a page header that has
position: fixed
π€ Expected Behavior
The popover should not scroll with the underlying page, but should remain positioned relative to the SearchAutocomplete.
π― Current Behavior
The popover scrolls with the page on top of the SearchAutocomplete contained in the page header with
position: fixed
.π Possible Solution
isNonModal
should not disableusePreventScroll
at:https://github.com/adobe/react-spectrum/blob/b35d5c02fe900badccd0cf1a8f23bb593419f238/packages/%40react-aria/overlays/src/usePopover.ts#L99-L107
π¦ Context
π» Code Sample
π Your Environment
π§’ Your Company/Team
Adobe/Accessibility
π· Tracking Issue (optional)
3383