Opening Dialog ('DialogTrigger') from 'Menu''s onAction prop cause clash of 'overflow: hidden' (usePreventScroll) on Mobile (Menu type 'tray') #987
Description
🐛 Bug Report
I've edited the issue and the code after the much appreciated help of @ktabors (Thank you so much!).
But still, the original bug appears.
After 'DialogTrigger' closes, scrolling on mobile devices/touch screens doesn't work.
- The parent '
View' Component is 110vh (for exmaple) in height, so there is a scrollbar in the document. - Triggering the '
Dialog' component from the 'Menu'sonAction(menuActionfunc) work's fine. - When the '
Dialog' opens, pressing the 'Cancel'Buttoncomponent closes the dialog. - After the '
Dialog' closes, the scrolling of the 'View' component doesn't respond.
On mobile, Menus automatically display in a tray instead of a popover to improve usability.
Menu - React Spectrum
The tray behavior uses usePreventScroll() from '@react-aria/overlays' or equivalent behavior logic.
The Dialog seems to use usePreventScroll() or equivalent behavior logic on mounting.
When triggering Dialog from Menu, the mounting and dismounting of each (usePreventScroll() in the process) component somehow clash:
- Original:
<body cz-shortcut-listen="true"> - When Menu open:
<body cz-shortcut-listen="true" padding-right: 0px overflow: hidden> - When Menu Item Clicked:
<body cz-shortcut-listen="true"> - When dialog close:
<body cz-shortcut-listen="true" overflow: hidden padding-right: 0px>
*Notice this behavior appear only on mobile/touch devices (Menu type: 'tray') (tested in chrome dev-tools, firefox-devtool and on my galaxy note 9 chrome browser). In desktop browsers (high resolutions) it works fine.
🤔 Expected Behavior
- Original:
<body cz-shortcut-listen="true"> - When Menu open:
<body cz-shortcut-listen="true" padding-right: 0px overflow: hidden> - When Menu Item Clicked:
<body cz-shortcut-listen="true"> - When Dialog open:
<body cz-shortcut-listen="true" padding-right: 0px overflow: hidden> - When Dialog close:
<body cz-shortcut-listen="true" >
As you may see, after the dialog closes the overflow: hidden css style stays.
The expected behavior is obvious, scrolling should work on both cases.
💁 Possible Solution:
Actually I found a 'dirty' workaround for immediate fix.
const closeControlledDialog = () => {
setOpenDate(false);
setTimeout(() => {
document.body.style.overflow = "auto"
}, 350);
};
BTW, 350 milliseconds is the minimum value I found working properly...
💻 Code Sample
let [openDailog, setOpenDialog] = React.useState(false);
let menuAction = (selection) => {
console.log(selection);
setOpenDialog(true);
};
let closeControlledDialog = () => {
setOpenDialog(false);
};
return (
<View height="110vh>
<MenuTrigger >
<ActionButton flexShrink={1} marginX="size-450">Menu</ActionButton>
<Menu onAction={menuAction}>
<Item key={'date'}>
<Text>Date</Text>
</Item>
</Menu>
</MenuTrigger>
<DialogTrigger isOpen={openDailog}>
<></>
{(close) => (
<Dialog>
<Heading>Date</Heading>
<Header>Filter transcations by Date</Header>
<Divider />
<ButtonGroup>
<Button onPress={chain(close, closeControlledDialog)} marginX="size-100" variant="secondary">
Cancel
</Button>
<Button variant="cta" autoFocus onPress={e => alert('Apply Fetching')}>
Confirm
</Button>
</ButtonGroup>
</Dialog>
)}
</DialogTrigger>
<View>
);
🌍 Your Environment
Firefox (Version 79.0 (64-bit) DevTools.
Chrome (Version 84.0.4147.125 (Official Build) (64-bit) DevTools.
Android Mobile phone (Samsung Galaxy Note 9) Chrome Browser.
"@adobe/react-spectrum": "^3.1.0",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.3",
Windows 10 Pro
Ubuntu 20.04.1
Android 9
Thanks!