Skip to content

Fix CopyButton 'Copied' tooltip not showing in Firefox#1015

Merged
bert-e merged 3 commits intodevelopment/1.0from
bugfix/CUI-6-copied-tooltip-FF
Feb 26, 2026
Merged

Fix CopyButton 'Copied' tooltip not showing in Firefox#1015
bert-e merged 3 commits intodevelopment/1.0from
bugfix/CUI-6-copied-tooltip-FF

Conversation

@JeanMarcMilletScality
Copy link
Contributor

@JeanMarcMilletScality JeanMarcMilletScality commented Feb 26, 2026

Context

Issue found on the Kasten ISV assistant summary page. The copy button did not show the "Copied !" tooltip in Firefox after the user copied content. The issue was reported on Firefox / Windows 11 (Chrome had no issue).
Ticket: https://scality.atlassian.net/browse/ZKUI-459

This issue applies to all copy button

Problem

When the user clicked copy, the button was set to disabled on success. In Firefox, disabling the button causes it to lose focus and fire onBlur on the Tooltip wrapper. The Tooltip hides on blur, so the "Copied !" message disappeared immediately and was never shown.

Changes

  • Do not set disabled on successCopyButton now only passes through props.disabled, so the button stays focusable and the tooltip remains visible.
  • Disabled-like behavior during success — When copyStatus === 'success', the button gets cursor: not-allowed and opacity: 0.5 so it looks disabled.
  • No-op on click during successonClick only calls copy() when not in success state, so the button is not clickable in practice for the ~2s feedback period.
  • Promise handlingnavigator.clipboard.writeText() is now awaited with .then()/.catch() so success/unsupported state is set correctly (e.g. if clipboard fails in some environments).

When disabling button, FF is calling the onBlur method from Tooltip causing it to no be displayed
@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options
name description privileged authored
/after_pull_request Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval Bypass the pull request author's approval
/bypass_build_status Bypass the build and test status
/bypass_commit_size Bypass the check on the size of the changeset TBA
/bypass_incompatible_branch Bypass the check on the source branch prefix
/bypass_jira_check Bypass the Jira issue check
/bypass_peer_approval Bypass the pull request peers' approval
/bypass_leader_approval Bypass the pull request leaders' approval
/approve Instruct Bert-E that the author has approved the pull request. ✍️
/create_pull_requests Allow the creation of integration pull requests.
/create_integration_branches Allow the creation of integration branches.
/no_octopus Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity Change review acceptance criteria from one reviewer at least to all reviewers
/wait Instruct Bert-E not to run until further notice.
Available commands
name description privileged
/help Print Bert-E's manual in the pull request.
/status Print Bert-E's current status in the pull request TBA
/clear Remove all comments from Bert-E from the history TBA
/retry Re-start a fresh build TBA
/build Re-start a fresh build TBA
/force_reset Delete integration branches & pull requests, and restart merge process from the beginning.
/reset Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

Waiting for approval

The following approvals are needed before I can proceed with the merge:

  • the author

  • one peer

Peer approvals must include at least 1 approval from the following list:

Copy link
Contributor

@ZiyangLinScality ZiyangLinScality left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding aria-disabled={isSuccess || props.disabled} to maintain accessibility semantics.

@ZiyangLinScality
Copy link
Contributor

Need some unit test at lease:

  • When writeText returns a rejected Promise, it should enter the unsupported state.
  • Clicking in the success state should not call copy again.

@JeanMarcMilletScality
Copy link
Contributor Author

/approve

@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

  • ✔️ development/1.0

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

  • Any commit you add on the source branch will trigger a new cycle after the
    current queue is merged.
  • Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

@bert-e
Copy link
Contributor

bert-e commented Feb 26, 2026

I have successfully merged the changeset of this pull request
into targetted development branches:

  • ✔️ development/1.0

Please check the status of the associated issue CUI-6.

Goodbye jeanmarcmilletscality.

@bert-e bert-e merged commit 5d8059c into development/1.0 Feb 26, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants