Fix CopyButton 'Copied' tooltip not showing in Firefox#1015
Fix CopyButton 'Copied' tooltip not showing in Firefox#1015bert-e merged 3 commits intodevelopment/1.0from
Conversation
When disabling button, FF is calling the onBlur method from Tooltip causing it to no be displayed
Hello jeanmarcmilletscality,My role is to assist you with the merge of this Available options
Available commands
Status report is not available. |
Waiting for approvalThe following approvals are needed before I can proceed with the merge:
Peer approvals must include at least 1 approval from the following list: |
ZiyangLinScality
left a comment
There was a problem hiding this comment.
Consider adding aria-disabled={isSuccess || props.disabled} to maintain accessibility semantics.
|
Need some unit test at lease:
|
|
/approve |
In the queueThe changeset has received all authorizations and has been added to the The changeset will be merged in:
There is no action required on your side. You will be notified here once IMPORTANT Please do not attempt to modify this pull request.
If you need this pull request to be removed from the queue, please contact a The following options are set: approve |
|
I have successfully merged the changeset of this pull request
Please check the status of the associated issue CUI-6. Goodbye jeanmarcmilletscality. |
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
disabledon success. In Firefox, disabling the button causes it to lose focus and fireonBluron the Tooltip wrapper. The Tooltip hides on blur, so the "Copied !" message disappeared immediately and was never shown.Changes
disabledon success —CopyButtonnow only passes throughprops.disabled, so the button stays focusable and the tooltip remains visible.copyStatus === 'success', the button getscursor: not-allowedandopacity: 0.5so it looks disabled.onClickonly callscopy()when not in success state, so the button is not clickable in practice for the ~2s feedback period.navigator.clipboard.writeText()is now awaited with.then()/.catch()so success/unsupported state is set correctly (e.g. if clipboard fails in some environments).