Issue Station
Sign In
Tools hereToolbox

dify - ✅(Solved) Fix Bug: Copy button tooltip never switches to "Copied" after clicking [1 pull requests, 1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
langgenius/dify#35512•Fetched 2026-04-24 06:14:21
View on GitHub
Comments
0
Participants
1
Timeline
3
Reactions
1
Author
lyzno1lyzno1
Participants
lyzno1lyzno1
Timeline (top)
closed ×1cross-referenced ×1labeled ×1

The shared useClipboard hook (web/hooks/use-clipboard.ts) never flips its copied state to true on a successful copy, so any UI that relies on it to toggle a "Copy" → "Copied" tooltip (or swap a filled/outline icon) is stuck on the pre-copy state.

Additionally, CopyFeedback (web/app/components/base/copy-feedback/index.tsx) wires onMouseLeave={reset} on the clickable area, which would clear the "Copied" state the instant the cursor leaves the icon — so even if the bug above were fixed, users wouldn't have time to read the confirmation.

Root Cause

  • hooks/use-clipboard.ts: the copy callback awaits writeTextToClipboard(...) but never calls handleCopyResult(true) on success, so copied stays false indefinitely.
  • base/copy-feedback/index.tsx: the div containing the click target has onMouseLeave={reset}, which immediately clears the copied state when the cursor moves away — the "Copied" label would barely be visible even if the hook were correct.

Fix Action

Fixed

PR fix notes

PR #35513: fix(web): restore "Copied" feedback state on copy buttons

Description (problem / solution / changelog)

[!IMPORTANT]

Fixes #35512.

Summary

useClipboard never flipped copied to true on a successful write, so every UI built on it (icon swap, Copy → Copied tooltip) was stuck on the pre-copy state. The most visible regression is the copy-icon next to the API endpoint URL on /datasets (Service API card), but this hook is shared by several surfaces.

CopyFeedback / CopyFeedbackNew also wired onMouseLeave={reset} on the click target, which would clear the "Copied" state the instant the cursor left the icon — even after fixing the hook, users could not read the confirmation.

Changes

  • web/hooks/use-clipboard.ts — call handleCopyResult(true) after a successful writeTextToClipboard, and after the prompt-fallback path when usePromptAsFallback is enabled.
  • web/app/components/base/copy-feedback/index.tsx — drop the onMouseLeave={reset} handler on both CopyFeedback and CopyFeedbackNew; rely on the hook's timer instead. Bump the timeout to 2000ms for these surfaces to match the KeyValueItem copy feedback used by the plugin Debug info popover.
  • web/app/components/base/copy-feedback/__tests__/index.spec.tsx — update the mouse-leave assertion to verify reset is not called (the timeout drives the revert now).

Screenshots

BeforeAfter
Clicking the copy icon copies the text, but the tooltip stays on Copy and the icon never swaps.Clicking copies the text, the icon swaps to the filled variant, and the tooltip shows Copied for ~2s before reverting.

Checklist

  • This change does not require a documentation update.
  • I understand that this PR may be closed in case there was no previous discussion or issues.
  • I've updated the existing test for each behavior change.
  • I've updated the documentation accordingly.
  • I ran pnpm exec vp staged on the touched files.

Made with Cursor

Changed files

  • web/app/components/base/copy-feedback/__tests__/index.spec.tsx (modified, +4/-4)
  • web/app/components/base/copy-feedback/index.tsx (modified, +6/-7)
  • web/hooks/use-clipboard.ts (modified, +2/-0)
RAW_BUFFERClick to expand / collapse

Summary

The shared useClipboard hook (web/hooks/use-clipboard.ts) never flips its copied state to true on a successful copy, so any UI that relies on it to toggle a "Copy" → "Copied" tooltip (or swap a filled/outline icon) is stuck on the pre-copy state.

Additionally, CopyFeedback (web/app/components/base/copy-feedback/index.tsx) wires onMouseLeave={reset} on the clickable area, which would clear the "Copied" state the instant the cursor leaves the icon — so even if the bug above were fixed, users wouldn't have time to read the confirmation.

Steps to reproduce

  1. Go to /datasets.
  2. Open the Service API card (click the green "Service API" chip).
  3. Click the copy-icon next to the API endpoint URL.

✔️ Expected behavior

  • The clipboard actually receives the text (this works).
  • The icon switches from outline → filled.
  • The tooltip label changes from Copy to Copied and persists for ~2 s before reverting, consistent with the copy-feedback in the plugin Debug info popover (KeyValueItem).

❌ Actual behavior

  • The icon never changes.
  • The tooltip stays on Copy forever.
  • (Secondary) Even after fixing the state toggle, the onMouseLeave={reset} in CopyFeedback collapses the "Copied" state before the user can read it.

Root cause

  • hooks/use-clipboard.ts: the copy callback awaits writeTextToClipboard(...) but never calls handleCopyResult(true) on success, so copied stays false indefinitely.
  • base/copy-feedback/index.tsx: the div containing the click target has onMouseLeave={reset}, which immediately clears the copied state when the cursor moves away — the "Copied" label would barely be visible even if the hook were correct.

Proposed fix

  • Call handleCopyResult(true) after a successful writeTextToClipboard and after the prompt-fallback path in useClipboard.
  • In CopyFeedback / CopyFeedbackNew, drop the onMouseLeave={reset} handler and rely on useClipboard's built-in timeout (bumped to ~2000 ms to match the KeyValueItem pattern used by the plugin Debug info popover).

Scope

  • Affects every caller of useClipboard that reads copied for UI feedback. The most visible consumer is CopyFeedback on /datasets (and anywhere else the Service API card / endpoint copy appears).

Environment

  • Dify version: main (commit 5b2c5da945)
  • Self Hosted (Source)

extent analysis

TL;DR

Call handleCopyResult(true) after a successful writeTextToClipboard in useClipboard and remove the onMouseLeave={reset} handler from CopyFeedback to fix the copy feedback issue.

Guidance

  • Verify that writeTextToClipboard is successfully writing text to the clipboard by checking the clipboard contents after calling the function.
  • Update useClipboard to call handleCopyResult(true) after a successful writeTextToClipboard to toggle the copied state.
  • Remove the onMouseLeave={reset} handler from CopyFeedback to prevent the "Copied" state from being cleared immediately.
  • Consider increasing the timeout in useClipboard to ~2000 ms to match the KeyValueItem pattern used by the plugin Debug info popover.

Example

// In useClipboard.ts
const handleCopy = async () => {
  try {
    await writeTextToClipboard(text);
    handleCopyResult(true); // Add this line
  } catch (error) {
    handleCopyResult(false);
  }
};

Notes

The proposed fix assumes that handleCopyResult(true) is the correct way to toggle the copied state in useClipboard. Additionally, removing the onMouseLeave={reset} handler from CopyFeedback may have unintended consequences if the component is used in other contexts where the "Copied" state should be cleared immediately.

Recommendation

Apply the proposed workaround by updating useClipboard and CopyFeedback as described, as this should fix the copy feedback issue without introducing significant changes to the codebase.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#API rate limit#retriever error#indexing error#inference speed

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

dify - ✅(Solved) Fix Bug: Copy button tooltip never switches to "Copied" after clicking [1 pull requests, 1 participants]