fix(invite): use native share on mobile for Copy Join Link button

[mcull]

Summary

Fixes #311 - "Copy share link didn't work on mobile"

This PR fixes the "Copy Join Link" button in the Manage Members modal, which was failing on iOS Chrome and other mobile browsers.

Problem

The "Copy Join Link" button was displaying "Copy failed, but here's the link" on mobile devices, particularly iOS Chrome. Users had to manually select and copy the link text, which was a poor experience.

Root Cause

• navigator.clipboard.writeText() requires a secure context and synchronous user gesture
• On iOS, this breaks when called after async operations (like the API fetch to generate the invite link)
• The fallback execCommand('copy') method was also unreliable on mobile browsers
• iOS Safari/Chrome are particularly restrictive about clipboard access outside direct user interactions

Solution

1. Use Native Share on Mobile Devices

On mobile (iOS/Android), the "Copy Join Link" button now uses the native share API (navigator.share()) instead of clipboard copy:

• Opens the familiar native share sheet on mobile devices
• Better UX - users can directly share via Messages, Mail, WhatsApp, etc.
• More reliable than clipboard API on mobile
• Automatically falls back to clipboard copy on desktop

2. Improved Clipboard Fallback

For desktop browsers without modern clipboard API:

• Changed textarea positioning from absolute with -9999px to fixed with opacity: 0
• Added explicit focus() call before select() for better browser compatibility
• Use actual textarea.value.length instead of hardcoded 99999

3. Better Error Handling

• Don't show error message when user cancels the native share dialog (AbortError)
• Still gracefully degrades by showing the link text if all methods fail

Testing

Mobile (iOS Chrome)

• ✅ Click "Copy Join Link" → Opens iOS native share sheet
• ✅ Can share directly to Messages, Mail, Notes, etc.
• ✅ Canceling share dialog doesn't show error

Desktop (Chrome/Firefox/Safari)

• ✅ Click "Copy Join Link" → Copies to clipboard
• ✅ Shows success message
• ✅ Can paste link into other apps

Fallback

• ✅ If all methods fail, still shows link text for manual copy

Technical Details

Changes in src/components/ManageMembersModal.tsx:

1. copyText function (lines 115-155): Improved fallback clipboard implementation
2. Copy Join Link handler (lines 741-780): Added mobile detection and native share

Mobile Detection:

/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)

Share API Usage:

await navigator.share({
  title: `Join ${collectionName} on StuffLibrary`,
  text: `Here's your invite to ${collectionName}`,
  url: link,
});

Related Issues

Closes #311

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stufflibrary	Ready	Preview	Comment	Sep 30, 2025 1:41am