Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The clipboard icon is not shown anymore when the tick icon is clicked #40915

Open
3 tasks done
MohamadSalman11 opened this issue Oct 7, 2024 · 1 comment · May be fixed by #40917
Open
3 tasks done

The clipboard icon is not shown anymore when the tick icon is clicked #40915

MohamadSalman11 opened this issue Oct 7, 2024 · 1 comment · May be fixed by #40917
Labels
docs has-pr v5

Comments

@MohamadSalman11
Copy link
Contributor

MohamadSalman11 commented Oct 7, 2024 •
edited
Loading

Prerequisites

Describe the issue

The clipboard icon is not showing anymore when the user clicks on the tick after it has been copied. The video below demonstrates the issue.

Normal behavior when not clicking on the tick:

screen-recording.mp4

When clicking on the tick after it has been copied:

screen-recording.mp4

We can solve the problem as follows:

bootstrap/site/assets/js/partials/code-examples.js

 clipboard.on('success', event => {
    const iconFirstChild = event.trigger.querySelector('.bi').firstElementChild
    const tooltipBtn = bootstrap.Tooltip.getInstance(event.trigger)
    const namespace = 'http://www.w3.org/1999/xlink'
    const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
    const originalTitle = event.trigger.title

    // Check if the tick icon is currently visible; if so, return (A possible solution)
>     if (originalXhref === '#check2') {
>       return
>     }

    tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
    event.trigger.addEventListener('hidden.bs.tooltip', () => {
      tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
    }, { once: true })
    event.clearSelection()
    iconFirstChild.setAttributeNS(namespace, 'href', originalXhref.replace('clipboard', 'check2'))

    setTimeout(() => {
      iconFirstChild.setAttributeNS(namespace, 'href', originalXhref)
      event.trigger.title = originalTitle
    }, 2000)
  })

Or

 clipboard.on('success', event => {
     ...
    const isCheckIconVisible = originalXhref === '#check2'
  
    // To make the code a bit clearer
    if (isCheckIconVisible) {
      return
    }
     ...
  })

After Implementing the Solution:

screen-recording.mp4

Did you prefer the first way to solve this or the second one? If you have any other solutions or alternative ways to approach this issue, don’t hesitate to share! 😊💡

Reduced test cases

None

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.3
@MohamadSalman11 MohamadSalman11 changed the title Clipboard icon not shown anymore when clicked during copying Clipboard icon not shown anymore when clicked tick icon Oct 7, 2024
@MohamadSalman11 MohamadSalman11 changed the title Clipboard icon not shown anymore when clicked tick icon The clipboard icon is not shown anymore when the tick icon is clicked Oct 7, 2024
Harsh0707005 added a commit to Harsh0707005/bootstrap that referenced this issue Oct 7, 2024
@Harsh0707005
fix clipboard icon not showing
fcd21b9 
Fixed twbs#40915
@Harsh0707005 Harsh0707005 mentioned this issue Oct 7, 2024
Closed
10 tasks
@julien-deramond
Copy link
Member

julien-deramond commented Oct 7, 2024 •
edited
Loading

IMHO, it's probably not worth spending too much time trying to find an alternative approach, as this is an edge case only in the documentation. I haven't checked it locally but I'd suggest going with the second option, which is likely more readable:

diff --git a/site/assets/js/partials/code-examples.js b/site/assets/js/partials/code-examples.js
index d81191a96..06bd8545c 100644
--- a/site/assets/js/partials/code-examples.js
+++ b/site/assets/js/partials/code-examples.js
@@ -63,6 +63,11 @@ export default () => {
     const namespace = 'http://www.w3.org/1999/xlink'
     const originalXhref = iconFirstChild.getAttributeNS(namespace, 'href')
     const originalTitle = event.trigger.title
+    const isCheckIconVisible = originalXhref === '#check2'
+
+    if (isCheckIconVisible) {
+      return
+    }
 
     tooltipBtn.setContent({ '.tooltip-inner': 'Copied!' })
     event.trigger.addEventListener('hidden.bs.tooltip', () => {

Feel free to create a PR with that option @MohamadSalman11, and we'll see if anyone from the JS team has a different or better approach in mind :)

@github-project-automation github-project-automation bot moved this to To do in v5.3.4 Oct 7, 2024
@MohamadSalman11 MohamadSalman11 linked a pull request Oct 7, 2024 that will close this issue
Open
10 tasks
@julien-deramond julien-deramond moved this from To do to Review in progress in v5.3.4 Oct 8, 2024
@julien-deramond julien-deramond moved this from Review in progress to Ready to merge in v5.3.4 Oct 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs has-pr v5
Projects
v5.3.4
Status: Ready to merge
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: clipboard icon not showing after multiple press MohamadSalman11/bootstrap
Fix: Clipboard icon not showing after multiple press Harsh0707005/bootstrap
2 participants
@julien-deramond @MohamadSalman11