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.

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

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

Comments

@MohamadSalman11
Copy link
Contributor

MohamadSalman11 commented Oct 7, 2024

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
@julien-deramond
Copy link
Member

julien-deramond commented Oct 7, 2024

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Ready to merge
2 participants