Fix playground Share button showing "Copied!" before clipboard copy completes #21942
+12
−8
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
|
Ohh, this is what was happening! I noticed this multiple times but didn't dig into it. Thanks for opening a fix for this issue, it would be useful to add a short video to demo this in the PR description when you make it ready for review. |
MichaReiser
reviewed
Dec 15, 2025
Member
MichaReiser
left a comment
MichaReiser
left a comment
There was a problem hiding this comment.
Thank you.
I think we should move the error handling into ShareButton to avoid async race conditions or stale states if sharing failed.
Comment on lines
+24
to
27
| await persist(settings, pythonSource).catch((error) => | ||
| // eslint-disable-next-line no-console | ||
| console.error(`Failed to share playground: ${error}`), | ||
| ); |
Member
There was a problem hiding this comment.
Suggested change
| await persist(settings, pythonSource).catch((error) => | |
| // eslint-disable-next-line no-console | |
| console.error(`Failed to share playground: ${error}`), | |
| ); | |
| try { | |
| await persist(serialized); | |
| } catch (error) { | |
| // eslint-disable-next-line no-console | |
| console.error("Failed to share playground", error); | |
| } |
| disabled={copied} | ||
| onClick={() => { | ||
| onClick={async () => { | ||
| await onShare(); |
Member
There was a problem hiding this comment.
I think we want to distinguish between three states
initial: Button is clickable, label isSharecopying: Button is disabled, label isSharecopied: Button is disabled, label isCopied
We should ensure that we reset the state to Share if onShare throws (maybe by moving the try catch handling from onShare to here, we could even consider having a 4th state failed)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fix the playground Share button to only show "Copied!" after the clipboard copy operation actually completes.
Previously, the Share button would immediately show "Copied!" when clicked, before the async
persistandclipboard.writeTextoperations finished. This caused a confusing UX where users would see "Copied!" but if they tabbed away quickly, the copy would fail with aNotAllowedError: Document is not focusederror.Now the button waits for
onShare()to complete before updating the UI state.Fixes #21691
Test Plan
Tested locally with
npm start --workspace ruff-playgroundDemo