Refresh button doesn't work if user follows a link within the preview

[joshwcomeau]

Bug report

Packages affected

I'm not 100% sure 😅

• [ ] sandpack-client
• [x] sandpack-react

Description of the problem

If the Sandpack renders an anchor tag, and the user clicks the link, there's no way to get back to the code preview, other than refreshing the page. The "Refresh" button has no effect.

I imagine this is probably a pretty tricky problem; because the user has navigated away from the page within the iframe, it can't be interacted with, so maybe the preview should be remounted?

I also get that maybe this is more of a feature request than a bug report, feels kinda in the middle... but it was reported to me as a bug report, and so I thought I'd forward it along.

Thanks y'all! 💖

Link to sandbox: CodeSandbox Repro

To repro:

• Click the "Go to Wikipedia" link. Wikipedia loads in the iframe
• Click the "Refresh" button in the bottom right. It has no effect

Expected result: The preview should re-load, showing the "Go to Wikipedia" link once more.

Your Environment

Software	Name/Version
Sandpack-client version
Sandpack-react version	1.5.4
Browser	Chrome
Operating System	MacOS

[joshwcomeau]

EDIT: Don't do this. It leads to other subtle issues, like the refresh button not clearing out errors. Issue is fixed in v1.8.5

---

Just a quick update, for anyone else wondering about this: I solved this in my app by essentially changing the key on the preview pane when the user clicks my (custom) refresh button. I did notice that this adds a "Run" button to the code editor, but I click it programmatically, with this snippet:

React.useEffect(() => {
  if (previewKey === 'initial') {
    return;
  }

  function clickButton() {
    const runButton = document.querySelector('.sp-button');

    if (runButton) {
      runButton.click();
    }
  }

  // Wait a single frame, so that the button exists.
  window.requestAnimationFrame(clickButton);
}, [previewKey]);

[danilowoz]

Hey @joshwcomeau, I managed to fix it on #587. Would you mind taking a look to see if it works as you expected?

Thanks for reporting this issue.

[joshwcomeau]

@danilowoz Just updated and it works great! Thanks so much :D