diff --git a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx index 1774207e..d0f23d6e 100644 --- a/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx +++ b/com.twin.app.shoptime/src/views/OnSalePanel/OnSaleNav/OnSaleNav.jsx @@ -7,6 +7,7 @@ import TScroller from "../../../components/TScroller/TScroller"; import useScrollTo from "../../../hooks/useScrollTo"; import css from "./OnSaleNav.module.less"; import OnSaleNavItem from "./OnSaleNavItem/OnSaleNavItem"; +import Spotlight from "@enact/spotlight"; const Container = SpotlightContainerDecorator( { leaveFor: { right: "" }, enterTo: "last-focused" }, @@ -59,22 +60,27 @@ export default function OnSaleNav({ const x = offsetFromContainerLeft - containerWidth + clippedWidth; - scrollLeft({ x }); + setTimeout(() => { + scrollLeft({ x }); + }, 100); } } }, [panelInfoLgCatCd, scrollLeft]); useEffect(() => { - if (panelInfoLgCatCd && previousPanelIsDetail) { - const node = document // - .querySelector(`[data-spotlight-id=spotlightId-${panelInfoLgCatCd}]`); - + if (panelInfoLgCatCd) { + const node = document.querySelector( + `[data-spotlight-id=spotlightId-${panelInfoLgCatCd}]` + ); if (node) { const containerId = "on-sale-nav"; setContainerLastFocusedElement(node, [containerId]); } + setTimeout(() => { + Spotlight.focus(node); + }, 100); } - }, [panelInfoLgCatCd, previousPanelIsDetail]); + }, [panelInfoLgCatCd]); return (