diff --git a/.changeset/shy-pots-brush.md b/.changeset/shy-pots-brush.md new file mode 100644 index 000000000000..a46b2abe3420 --- /dev/null +++ b/.changeset/shy-pots-brush.md @@ -0,0 +1,5 @@ +--- +"live-mobile": patch +--- + +Fix QueuedDrawer component so that onClose prop value can change without triggering an auto close of the drawer. diff --git a/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/TestScreens.tsx b/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/TestScreens.tsx index 0bc40e0f8537..b6c2eb2d2c5f 100644 --- a/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/TestScreens.tsx +++ b/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/TestScreens.tsx @@ -181,7 +181,7 @@ export const MainTestScreen = () => { const [drawer3RequestingToBeOpened, setDrawer3RequestingToBeOpened] = useState(false); const [drawer4ForcingToBeOpened, setDrawer4ForcingToBeOpened] = useState(false); - const handleDrawer1Close = useCallback(() => setDrawer1RequestingToBeOpened(false), []); + const handleDrawer1Close = () => setDrawer1RequestingToBeOpened(false); // purposely not using useCallback to check if drawer behaves well when onClose prop changes const handleDrawer2Close = useCallback(() => setDrawer2RequestingToBeOpened(false), []); const handleDrawer3Close = useCallback(() => setDrawer3RequestingToBeOpened(false), []); const handleDrawer4Close = useCallback(() => setDrawer4ForcingToBeOpened(false), []); diff --git a/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/index.tsx b/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/index.tsx index 10118a9df340..ea9c7a153cae 100644 --- a/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/index.tsx +++ b/apps/ledger-live-mobile/src/newArch/components/QueuedDrawer/index.tsx @@ -81,14 +81,17 @@ const QueuedDrawer = ({ setIsDisplayed(true); }, []); + const onCloseRef = useRef(onClose); + onCloseRef.current = onClose; + const triggerClose = useCallback(() => { setIsDisplayed(false); if (drawerInQueueRef.current?.getPositionInQueue() !== 0) { drawerInQueueRef.current?.removeDrawerFromQueue(); drawerInQueueRef.current = undefined; } - onClose && onClose(); - }, [onClose]); + onCloseRef.current && onCloseRef.current(); // hack to avoid triggering the useEffect below if the parent changes the onClose prop + }, []); useEffect(() => { if (!isFocused && (isRequestingToBeOpened || isForcingToBeOpened)) {