WRR-1063: Added a QA sampler for Spotlight.focus with `preventScrol…

…l` option (#1697) * WRR-1063: Added a QA sampler for `Spotlight.focus` with `preventScroll` option Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected]) * Update QA sample to be clearer Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected]) * update .travis.yml to resolve the issue of npm install Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected]) * Updated QA sample as reviewed Enact-DCO-1.0-Signed-off-by: Seungcheon Baek ([email protected]) --------- Co-authored-by: Seungcheon Baek <[email protected]> Co-authored-by: Juwon Jeong <[email protected]>
enactjs · Dec 31, 2024 · 79850bc · 79850bc
1 parent af23bc4
commit 79850bc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/samples/sampler/stories/qa/Spotlight.js b/samples/sampler/stories/qa/Spotlight.js
@@ -23,7 +23,7 @@ import {boolean, select} from '@enact/storybook-utils/addons/controls';
 import {Row, Cell, Column} from '@enact/ui/Layout';
 import ri from '@enact/ui/resolution';
 import PropTypes from 'prop-types';
-import {Component, cloneElement} from 'react';
+import {Component, cloneElement, useCallback} from 'react';
 
 import css from './Spotlight.module.less';
 
@@ -518,6 +518,35 @@ export const FocusRing = () => (
 
 FocusRing.storyName = 'Spottable with Focus Ring';
 
+export const FocusWithPreventScroll = () => {
+	const handleClickNotPrevented = useCallback(() => {
+		Spotlight.focus('#FocusWithPreventScrollTarget1');
+	}, []);
+
+	const handleClickPrevented = useCallback(() => {
+		Spotlight.focus('#FocusWithPreventScrollTarget2', {preventScroll: true});
+	}, []);
+
+	return (
+		<>
+			<p>Press OK button on the first button calls Spotlight.focus() to focus the second button for each scroller.</p>
+			Without preventScroll option
+			<div className={css.scroller}>
+				<Button className={css.block} onClick={handleClickNotPrevented}>Press OK on this button</Button>
+				<Button className={css.block} id="FocusWithPreventScrollTarget1">To be scrolled</Button>
+			</div>
+			<br />
+			With preventScroll: true option
+			<div className={css.scroller}>
+				<Button className={css.block} onClick={handleClickPrevented}>Press OK on this button</Button>
+				<Button className={css.block} id="FocusWithPreventScrollTarget2">Not to be scrolled</Button>
+			</div>
+		</>
+	);
+};
+
+FocusWithPreventScroll.storyName = 'Focus with preventScroll';
+
 export const KitchenSink = (args) => (
 	<Column>
 		<Cell component="p" shrink>

diff --git a/samples/sampler/stories/qa/Spotlight.module.less b/samples/sampler/stories/qa/Spotlight.module.less
@@ -33,3 +33,13 @@
 		transform: scale(1.1);
 	});
 }
+
+.scroller {
+	overflow-y: scroll;
+	height: 240px;
+	border: 6px solid orangered;
+}
+
+.block {
+	display: block;
+}