Root Cause

Two compounding issues in src/components/Paste.tsx + src/lib/clipboard.ts:

1. `navigator.permissions.query({ name: 'clipboard-read' })` is unsupported on iOS Safari

clipboard.ts:24-30 — queryPastePermission():

return (await navigator.permissions.query({ name: 'clipboard-read' as PermissionName })).state

On iOS Safari this throws a TypeError (the Permissions API doesn't support clipboard-read). The catch returns 'denied', so the condition ['prompt', 'granted'].includes(state) in Paste.tsx:18 is never true → pasteFromClipboard() is never called → setShowPaste(true) is never reached → button stays hidden.

2. Ambient clipboard read in `useEffect` requires a user gesture on iOS

Even on browsers where the permissions query succeeds, iOS requires navigator.clipboard.readText() to be called from a user gesture (tap/click). Reading it in useEffect on mount (no gesture) throws NotAllowedError. pasteFromClipboard() catches and returns '' → if (!data) return → setShowPaste is never set to true.

Together these mean: on iOS, the paste button never appears regardless of whether the user has previously granted permission.

Fix

The button's visibility should not depend on a successful ambient read at mount time. The simplest fix:

// Always show the paste button on iOS (or when the permissions API is unavailable),
// and defer the actual clipboard read to the click handler (which IS a user gesture).
useEffect(() => {
  queryPastePermission()
    .then((state) => {
      if (['prompt', 'granted'].includes(state)) {
        pasteFromClipboard().then((data) => {
          if (!data || (validator && !validator(data))) {
            // Can't pre-read (likely iOS), but still show the button
            setShowPaste(true)
            return
          }
          setClipboard(data)
          setShowPaste(true)
        })
      } else {
        // permissions API unsupported (iOS) — show button anyway, read on click
        setShowPaste(true)
      }
    })
    .catch(() => {
      // permissions API threw (iOS Safari) — show button, read on click
      setShowPaste(true)
    })
}, [])

The handleClick path already handles the empty-clipboard case correctly (pasteFromClipboard().then(data => onPaste(data))), so a user-gesture-triggered read will work on iOS after this change.

The validator check in handleClick should also mirror the one in the useEffect path if pre-populated data is available.

Affected file

src/components/Paste.tsx:15-30 — the useEffect that gates setShowPaste
src/lib/clipboard.ts:24-30 — queryPastePermission returning 'denied' on iOS

Root Cause

1. navigator.permissions.query({ name: 'clipboard-read' }) is unsupported on iOS Safari

2. Ambient clipboard read in useEffect requires a user gesture on iOS

Fix

Affected file

1. `navigator.permissions.query({ name: 'clipboard-read' })` is unsupported on iOS Safari

2. Ambient clipboard read in `useEffect` requires a user gesture on iOS

Uh oh!

ios: always ask permission for clipboard #635

Description

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions