My current issue involves a text input and copy button located within an accordion section.
https://i.sstatic.net/0JS9W.png
The code for the copy button is as follows:
<accordian>
<accordian-panel heading="Feed ID">
<div class="form-row form-row-layout">
<input type="text" v-model="feed.app_id" id="feedAppId" />
<button class="btn btn-sm btn-primary" id="copyFeedIdBtn" @click.prevent="copyFeedId()" data-clipboard-target="#feedAppId">Copy</button>
</div>
</accordian-panel>
</accordian>
This is the JavaScript method associated with the copy functionality:
copyFeedId()
{
this.clipboard = new Clipboard(jQuery('#copyFeedIdBtn')[0],{
container: this.$el
});
this.clipboard.on('success', (e) => {
this.$appToasts.success('Feed ID copied to clipboard');
e.clearSelection();
});
this.clipboard.on('error', (e) => {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}
I have observed that I need to click the button twice for it to function properly.
The issue may be related to the fact that the button event is not registered when the accordion section is closed. When I attempted to select jQuery('#copyFeedIdBtn')[0] while the accordion was closed, it returned undefined. I am unsure how to handle this situation and ensure the event is registered even when the accordion is closed. Your assistance in resolving this matter would be greatly appreciated. Thank you!