From a00ac0dc70c2295d611814586b243f7721eb14d5 Mon Sep 17 00:00:00 2001 From: Dipesh B C Date: Wed, 25 Dec 2024 12:07:31 -0500 Subject: [PATCH] fix(sandpack): resolve UI desync after reset by removing call to reset() Remove call to refresh() in the handleReset function and dependencies related to refresh() from NavigationBar.tsx file to fix a UI desynchronization issue in the Sandpack embedded editor. Currently, clicking the reset button resets the code but does not update the UI until the editor is interacted with. --- src/components/MDX/Sandpack/NavigationBar.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 26ed5783de9..e315507433a 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -11,11 +11,7 @@ import { Fragment, } from 'react'; import cn from 'classnames'; -import { - FileTabs, - useSandpack, - useSandpackNavigation, -} from '@codesandbox/sandpack-react/unstyled'; +import {FileTabs, useSandpack} from '@codesandbox/sandpack-react/unstyled'; import {OpenInCodeSandboxButton} from './OpenInCodeSandboxButton'; import {ResetButton} from './ResetButton'; import {DownloadButton} from './DownloadButton'; @@ -47,9 +43,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { // By default, show the dropdown because all tabs may not fit. // We don't know whether they'll fit or not until after hydration: const [showDropdown, setShowDropdown] = useState(true); - const {activeFile, setActiveFile, visibleFiles, clients} = sandpack; - const clientId = Object.keys(clients)[0]; - const {refresh} = useSandpackNavigation(clientId); + const {activeFile, setActiveFile, visibleFiles} = sandpack; const isMultiFile = visibleFiles.length > 1; const hasJustToggledDropdown = useRef(false); @@ -109,8 +103,6 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { ) { sandpack.resetAllFiles(); } - - refresh(); }; return (