Clipboard API Fails in TypeScript: 4 Undocumented Cases That Will Make You Pull Your Hair Out

What could possibly go wrong with copying text to the clipboard? Just press a button, call navigator.clipboard.writeText(), and you're done. But no, TypeScript and browsers decided that would be too boring. Developer JTorchia dug into four landmines that the docs politely ignore. Sharing the pain so you don't have to repeat it.

Four Cases That Will Ruin Your Day

1. Insecure Context — Clipboard API only works over HTTPS or localhost. If your app is on HTTP, the API silently returns undefined. No errors, just silence. Like trying to make a phone call in a dead zone.
2. Lost Focus — If the user clicks somewhere else before writeText executes, the browser assumes you're trying to steal data and blocks the operation. It's like trying to pass a note in class but the teacher turns around and you're left holding it.
3. Revoked Permissions on iOS — Safari on iOS can revoke clipboard permission if the user hasn't interacted with the site in the last 30 seconds. And you only find out via a quiet rejected promise.
4. React Timing — Calling writeText inside an effect or a handler that isn't a direct result of a user action (e.g., a click) can cause the browser to block the call. React batches updates, and your click might get lost in the queue.

How to Fix It (Spoiler: Not with Magic)

For each case there's a workaround: check navigator.clipboard exists, handle promise errors, use useRef to store the last user action, and never call Clipboard API outside user event handlers. Code examples are in the original article.

Studio METABYTE's take: We stepped on these same rakes in a fintech startup project. Now we have a "Clipboard API: check before deploy" checklist and sleep better. If your project needs reliable copying too — drop us a line, we'll share the recipe.