diff --git a/CHANGELOG.md b/CHANGELOG.md
index 28ee3cf5af..052067de3a 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/samples/sampler/stories/qa/Scroller.js b/samples/sampler/stories/qa/Scroller.js
index 7e340b2b8e..c5ca788f96 100644
--- a/samples/sampler/stories/qa/Scroller.js
+++ b/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 (
+ <>
+
+
+
+
+
+
+
+ - Item A
+ - Item B
+
+
+ >
+ );
+};
+
+WithFixedPopupPanels.storyName = 'With FixedPopupPanels';
diff --git a/useScroll/useScroll.js b/useScroll/useScroll.js
index 9b4338e1cc..1ee2fb1100 100644
--- a/useScroll/useScroll.js
+++ b/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 @@ const useThemeScroll = (props, instances) => {
}
}
+ function preventScroll (ev) {
+ if (Spotlight.isPaused() && getDirection(ev.keyCode)) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ }
+ }
+
// Return
return {
@@ -285,6 +292,7 @@ const useThemeScroll = (props, instances) => {
handleTouchStart,
handleWheel,
removeEventListeners,
+ preventScroll,
scrollbarProps,
scrollStopOnScroll,
scrollTo,
@@ -405,6 +413,7 @@ const useScroll = (props) => {
handleTouchStart,
handleWheel,
removeEventListeners,
+ preventScroll, // scrollMode 'native'
scrollbarProps,
scrollStopOnScroll, // scrollMode 'native'
scrollTo,
@@ -417,6 +426,7 @@ const useScroll = (props) => {
if (scrollMode === 'translate') {
scrollProps.stop = stop;
} else {
+ scrollProps.preventScroll = preventScroll;
scrollProps.scrollStopOnScroll = scrollStopOnScroll;
scrollProps.start = start;
}