Hey there,

In the controller, innerText is used to retrieve and put back the content of the buttonTarget in the connect and copied methods:

connect (): void {
    if (!this.hasButtonTarget) return

    this.originalText = this.buttonTarget.innerText
  }

copied (): void {
  ...
  this.timeout = setTimeout(() => {
      this.buttonTarget.innerText = this.originalText
    }, this.successDurationValue)
  }

Therefore if the content is, let's say, an icon, it doesn't work anymore. Wouldn't it be a nice additional feature to user innerHTML so that any kind of content would be put back in place once the successContent message has been displayed, like the suggestion below ? I can't see any side effect as it would work the same for simple text and only extend the component capabilities, but I might miss something...

connect (): void {
    if (!this.hasButtonTarget) return

    this.originalHTML= this.buttonTarget.innerHTML
  }

copied (): void {
  ...
  this.timeout = setTimeout(() => {
      this.buttonTarget.innerHTML = this.originalHTML
    }, this.successDurationValue)
  }

Thanks,

hey 👋🏻
thanks a lot for this lib!

I'm trying to upgrade to either 3.4 or 4.0 and I keep getting the same error:

error [email protected]: The engine "node" is incompatible with this module. Expected version "18". Got "20.2.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

checking the diff, I noticed you introduce a hardcoded node version in the requirements here. I'm not a JS developer but I wonder if it is possible to have a more relaxed node version pinning like >= 18 or something

The component is not working when Im broadcasting my server but when I'm in local(rails s) it is working, why? Is their anything I missed?

Instead of requiring an HTMLInputElement, which has the display problem, what about allowing the content to be copied in the controller values?

Instead of

<div data-controller="clipboard" data-clipboard-success-content="Copied!">
  <input type="text" value="Click the button to copy me!" data-clipboard-target="source" />

<div data-controller="clipboard" 
data-clipboard-content="Click the button to copy me (this isn't visible, but it could be some long and garly url or uuid!)"
data-clipboard-success-content="Copied!">

I'm not sure if this is even possible, I'm not sure how 'select' and document.execCommand('copy') work.

Noticed that it doesn't copy text from hidden fields. I think would be nice to add this