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

[MohamadSalman11]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

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

[julien-deramond]

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