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; }