2.7.10 release

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 The following is a curated list of changes in the Enact sandstone module, newest changes on the top.
 
+## [2.7.10] - 2023-09-20
+
+### Fixed
+
+- `sandstone/Scroller` to not show console error when an abnormal `editable.initialSelected` is given
+- `sandstone/VirtualList` to not snatch focus from other list on the first render
+
 ## [2.7.9] - 2023-09-12
 
 ### Changed

Scroller/EditableWrapper.js

@@ -87,7 +87,6 @@ const EditableWrapper = (props) => {
 	const hideItemFuncRef = editable?.hideItemFuncRef;
 	const showItemFuncRef = editable?.showItemFuncRef;
 	const focusItemFuncRef = editable?.focusItemFuncRef;
-	const initialSelected = editable?.initialSelected;
 	const mergedCss = usePublicClassNames({componentCss, customCss, publicClassNames: true});
 
 	const dataSize = children?.length;
@@ -131,7 +130,10 @@ const EditableWrapper = (props) => {
 		// Flag for prevent event propagation
 		needToPreventEvent: null,
 
-		lastInputDirection: null
+		lastInputDirection: null,
+
+		// initialSelected
+		initialSelected: editable?.initialSelected
 	});
 	const announceRef = useRef({});
 
@@ -151,11 +153,11 @@ const EditableWrapper = (props) => {
 		mutableRef.current.selectedItemLabel = '';
 		mutableRef.current.lastMoveDirection = null;
 		mutableRef.current.prevToIndex = null;
-		initialSelected.itemIndex = null;
+		mutableRef.current.initialSelected = null;
 		wrapperRef.current.style.setProperty('--selected-item-offset', '0px');
 
 		Spotlight.set(spotlightId, {restrict: 'self-first'});
-	}, [customCss.focused, customCss.selected, initialSelected]);
+	}, [customCss.focused, customCss.selected]);
 
 	// Finalize the order
 	const finalizeOrders = useCallback(() => {
@@ -213,23 +215,23 @@ const EditableWrapper = (props) => {
 			mutableRef.current.prevToIndex = mutableRef.current.fromIndex;
 
 			updateArrowIcon(mutableRef.current.fromIndex);
-			if (!initialSelected?.itemIndex) {
+			if (!mutableRef.current.initialSelected) {
 				setTimeout(() => {
 					announceRef.current.announce(
 						mutableRef.current.selectedItemLabel + $L('Press the left/right button to move or press the up button to select other options.')
 					);
 				}, completeAnnounceDelay);
 			}
 		}
-	}, [customCss.focused, customCss.selected, initialSelected?.itemIndex, updateArrowIcon]);
+	}, [customCss.focused, customCss.selected, updateArrowIcon]);
 
 	const finalizeEditing = useCallback((orders) => {
-		if (initialSelected?.itemIndex) {
+		if (mutableRef.current.initialSelected) {
 			mutableRef.current.selectedItem.children[1].ariaLabel = `${mutableRef.current.selectedItem.ariaLabel} ${$L('Press the OK button to move or press the up button to select other options.')}`;
 		}
 		forwardCustom('onComplete', () => ({orders, hideIndex: mutableRef.current.hideIndex}))(null, editable);
 		reset();
-	}, [editable, initialSelected?.itemIndex, reset]);
+	}, [editable, reset]);
 
 	const findItemNode = useCallback((node) => {
 		for (let current = node; current !== scrollContentRef.current && current !== document; current = current.parentNode) {
@@ -754,15 +756,21 @@ const EditableWrapper = (props) => {
 	}, [getNextIndexFromPosition, moveItems, scrollContainerHandle, scrollContentRef]);
 
 	useEffect(() => {
-		if (initialSelected?.itemIndex) {
-			scrollContainerHandle.current?.scrollTo({animate:false, position: {x: initialSelected.scrollLeft}});
+		if (mutableRef.current.initialSelected) {
+			scrollContainerHandle.current?.scrollTo({animate:false, position: {x: mutableRef.current.initialSelected.scrollLeft}});
 		}
-	}, [initialSelected?.itemIndex, initialSelected?.scrollLeft, scrollContainerHandle]);
+	}, [scrollContainerHandle]);
 
 	useLayoutEffect(() => {
 		const iconItemList = Array.from(wrapperRef.current.children);
+		let initialSelected = mutableRef.current.initialSelected;
+
+		if (initialSelected && !(initialSelected?.itemIndex > 0)) { // filter nullish values
+			initialSelected = mutableRef.current.initialSelected = null;
+		}
+
 		if (initialSelected?.itemIndex) {
-			const initialSelectedItem = wrapperRef.current.children[initialSelected.itemIndex - 1];
+			const initialSelectedItem = wrapperRef.current.children[initialSelected?.itemIndex - 1];
 			if (initialSelectedItem?.dataset.index) {
 				mutableRef.current.focusedItem = initialSelectedItem;
 				mutableRef.current.lastMouseClientX = getLastPointerPosition().x;
@@ -774,7 +782,11 @@ const EditableWrapper = (props) => {
 
 		iconItemList.forEach((iconItemWrapper, index) => {
 			if (iconItemWrapper?.children[1]) {
-				iconItemWrapper.children[1].ariaLabel += index === initialSelected?.itemIndex - 1 ? ` ${$L('Press the left/right button to move or press the up button to select other options.')}` : ` ${$L('Press the OK button to move or press the up button to select other options.')}`;
+				if (initialSelected && (initialSelected.itemIndex - 1 === index)) {
+					iconItemWrapper.children[1].ariaLabel += ` ${$L('Press the left/right button to move or press the up button to select other options.')}`;
+				} else {
+					iconItemWrapper.children[1].ariaLabel += ` ${$L('Press the OK button to move or press the up button to select other options.')}`;
+				}
 			}
 		});
 	}, []); // eslint-disable-line react-hooks/exhaustive-deps

TabLayout/TabLayout.js

@@ -284,7 +284,7 @@ const TabLayoutBase = kind({
 			const tabLayoutContentRef = document.querySelector(`[data-spotlight-id='${spotlightId}'] .${componentCss.content}`);
 
 			if (forwardWithPrevent('onKeyUp', ev, props) && is('cancel')(keyCode)) {
-				if ((type === 'popup' && popupPanelRef?.contains(target) && popupPanelRef?.dataset.index === '0') || (type === 'normal' && tabLayoutContentRef?.contains(target))) {
+				if ((type === 'popup' && popupPanelRef?.contains(target) && popupPanelRef?.dataset.index === '0') || (type === 'normal' && !Spotlight.getPointerMode() && tabLayoutContentRef?.contains(target))) {
 					if (collapsed) {
 						forward('onExpand', ev, props);
 					}

VirtualList/useThemeVirtualList.js

@@ -145,8 +145,9 @@ const useSpottable = (props, instances) => {
 	}, []); // eslint-disable-line react-hooks/exhaustive-deps
 
 	if (props.dataSize !== mutableRef.current.dataSize) {
-		const focusedIndex = Spotlight.getCurrent()?.dataset?.index;
-		if (focusedIndex > props.dataSize - 1) { // if a focused item is about to disappear
+		const current = Spotlight.getCurrent();
+		if (current && props.scrollContainerContainsDangerously(current) && current.dataset?.index > props.dataSize - 1) {
+			// if a focused item is about to disappear
 			setPreservedIndex(props.dataSize - 1);
 		}
 		mutableRef.current.dataSize = props.dataSize;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/sandstone",
-  "version": "2.7.9",
+  "version": "2.7.10",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "repository": {
     "type": "git",
@@ -42,11 +42,11 @@
     "extends": "enact-proxy/strict"
   },
   "dependencies": {
-    "@enact/core": "^4.7.5",
-    "@enact/i18n": "^4.7.5",
-    "@enact/spotlight": "^4.7.5",
-    "@enact/ui": "^4.7.5",
-    "@enact/webos": "^4.7.5",
+    "@enact/core": "^4.7.6",
+    "@enact/i18n": "^4.7.6",
+    "@enact/spotlight": "^4.7.6",
+    "@enact/ui": "^4.7.6",
+    "@enact/webos": "^4.7.6",
     "classnames": "^2.3.2",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
@@ -57,7 +57,7 @@
     "ilib": "^14.18.0"
   },
   "peerDependencies": {
-    "ilib": "^14.17.0 || ^14.17.0-webos1"
+    "ilib": "^14.18.0 || ^14.18.0-webos1"
   },
   "devDependencies": {
     "@enact/docs-utils": "^0.4.5",

samples/event-logger/package.json

@@ -22,11 +22,11 @@
 		"theme": "sandstone"
 	},
 	"dependencies": {
-		"@enact/core": "^4.7.5",
-		"@enact/i18n": "^4.7.5",
+		"@enact/core": "^4.7.6",
+		"@enact/i18n": "^4.7.6",
 		"@enact/sandstone": "../../",
-		"@enact/spotlight": "^4.7.5",
-		"@enact/ui": "^4.7.5",
+		"@enact/spotlight": "^4.7.6",
+		"@enact/ui": "^4.7.6",
 		"@reduxjs/toolkit": "^1.9.5",
 		"ilib": "^14.18.0",
 		"prop-types": "^15.8.1",

samples/perf-scroller-native/package.json

@@ -22,11 +22,11 @@
     "theme": "sandstone"
   },
   "dependencies": {
-    "@enact/core": "^4.7.5",
-    "@enact/i18n": "^4.7.5",
+    "@enact/core": "^4.7.6",
+    "@enact/i18n": "^4.7.6",
     "@enact/sandstone": "../../",
-    "@enact/spotlight": "^4.7.5",
-    "@enact/ui": "^4.7.5",
+    "@enact/spotlight": "^4.7.6",
+    "@enact/ui": "^4.7.6",
     "classnames": "^2.3.2",
     "ilib": "^14.18.0",
     "react": "^18.2.0",