WRR-11077: Fixed Scroller to prevent the native scrolling behavior caused by keydown events when the popup is opened

CHANGELOG.md

@@ -7,6 +7,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 ### Fixed
 
 - `sandstone/Scroller` to focus properly when the spottable node is bigger than the size of viewport by voice control
+- `sandstone/Scroller` to prevent the native scrolling behavior caused by keydown events when a popup is open
 
 ## [3.0.0-alpha.3] - 2024-12-02
 

samples/sampler/stories/qa/Scroller.js

@@ -1284,3 +1284,35 @@ export const WithContentContainerOnFocus = () => {
 };
 
 WithContentContainerOnFocus.storyName = 'With Content Container';
+
+export const WithFixedPopupPanels = () => {
+	const [open, setOpenState] = useState(false);
+
+	const handleOpen = useCallback(() => {
+		setOpenState(true);
+	}, []);
+
+	const handleClose = useCallback(() => {
+		setOpenState(false);
+	}, []);
+
+	return (
+		<>
+			<Scroller>
+				<Button onClick={handleOpen}>
+					Open FixedPopupPanels
+				</Button>
+				<div style={{height: ri.scaleToRem(2400)}} />
+			</Scroller>
+			<FixedPopupPanels open={open} onClose={handleClose}>
+				<Panel>
+					<Header title="Panel" />
+					<Item>Item A</Item>
+					<Item>Item B</Item>
+				</Panel>
+			</FixedPopupPanels>
+		</>
+	);
+};
+
+WithFixedPopupPanels.storyName = 'With FixedPopupPanels';

useScroll/useScroll.js

@@ -10,7 +10,7 @@
 
 import {forward} from '@enact/core/handle';
 import platform from '@enact/core/platform';
-import Spotlight from '@enact/spotlight';
+import Spotlight, {getDirection} from '@enact/spotlight';
 import {spottableClass} from '@enact/spotlight/Spottable';
 import {getContainerId} from '@enact/spotlight/src/container';
 import {getTargetByDirectionFromPosition} from '@enact/spotlight/src/target';
@@ -270,6 +270,13 @@
 		}
 	}
 
+	function preventScroll (ev) {
+		if (Spotlight.isPaused() && getDirection(ev.keyCode)) {
+			ev.preventDefault();
+			ev.stopPropagation();
+		}
+	}
+
 	// Return
 
 	return {
@@ -285,6 +292,7 @@
 		handleTouchStart,
 		handleWheel,
 		removeEventListeners,
+		preventScroll,
 		scrollbarProps,
 		scrollStopOnScroll,
 		scrollTo,
@@ -405,6 +413,7 @@
 		handleTouchStart,
 		handleWheel,
 		removeEventListeners,
+		preventScroll, // scrollMode 'native'
 		scrollbarProps,
 		scrollStopOnScroll, // scrollMode 'native'
 		scrollTo,
@@ -417,6 +426,7 @@
 	if (scrollMode === 'translate') {
 		scrollProps.stop = stop;
 	} else {
+		scrollProps.preventScroll = preventScroll;
 		scrollProps.scrollStopOnScroll = scrollStopOnScroll;
 		scrollProps.start = start;
 	}