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

.travis.yml

@@ -16,7 +16,7 @@ install:
     - npm install
     - npm link
     - popd
-    - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
+    - git clone --branch=feature/WRR-11077 --depth 1 https://github.com/enactjs/enact ../enact
     - pushd ../enact
     - npm install
     - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact sandstone module, newest changes on the top.
 
+## [unreleased]
+
+### Fixed
+
+- `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
 
 ### Added

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);
+	}, [setOpenState]);
+
+	const handleClose = useCallback(() => {
+		setOpenState(false);
+	}, [setOpenState]);
+
+	return (
+		<>
+			<Scroller>
+				<Button onClick={handleOpen}>
+					Open FixedPopupPanels
+				</Button>
+				<div style={{height: ri.scaleToRem(2400)}} />
+			</Scroller>
+			<FixedPopupPanels open={open} onClose={handleClose}>
+				<FixedPopupPanels.Panel>
+					<Header title="Panel" />
+					<Item>Item A</Item>
+					<Item>Item B</Item>
+				</FixedPopupPanels.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;
 	}