The clipboard icon is not shown anymore when the tick icon is clicked #40915
Description
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