Copy button doesn't work

[VNRARA]

⚠️ Please verify that this bug has NOT been raised before.

• I checked and didn't find similar issue

🛡️ Security Policy

• I agree to have read this project Security Policy

Description

Copy button doesn't work when creating API keys.

👟 Reproduction steps

Create key, press copy button

👀 Expected behavior

copy key

😓 Actual Behavior

no copy

🐻 Uptime-Kuma Version

1.21.1

💻 Operating System and Arch

DSM 7.1 (Docker)

🌐 Browser

Version 111.0.5563.65 (Official Build) (64-bit)

🐋 Docker Version

No response

🟩 NodeJS Version

No response

📝 Relevant log output

No response

[chakflying]

Reproduced this. Here is the summary:

	HTTP	HTTPS
localhost	working	not tested
non-localhost	not working	working

Both the development build and release build, and firefox / edge the failure case exist.
There is too much magic in CopyableInput and I don't really want to figure out what's going on 😅

[louislam]

Weird, I re-checked the code, it is basically getting a monitor data from server and fill in the data.
https://github.com/louislam/uptime-kuma/pull/2489/files

Edit: I thought it is the monitor clone button.

[louislam]

Can reproduce now with http://non-localhost

But it is still weird, the CopyableInput is working in both https and http in the Push URL (under New monitor -> Push type)

[chakflying]

I think according to this StackOverflow being in a modal triggers some enhanced security from the browser. Since our CopyableInput is an actual textfield, maybe we can just use the existing one instead of creating a hidden input to copy from.

[louislam]

I think according to this StackOverflow being in a modal triggers some enhanced security from the browser. Since our CopyableInput is an actual textfield, maybe we can just use the existing one instead of creating a hidden input to copy from.

It is only working with textarea, so I move the hidden textarea to the same level instead of creating in the top level of document.