fix: prevent drawer from immediately closing on touch devices

d40fa46 removed preventDefault() from touchend to fix Android keyboard
focus. This caused a regression: tapping the drawer toggle opens it,
but the browser-synthesised click (~4ms later) lands on the now-visible
backdrop, which closes the drawer immediately.

Fix: ignore the first click on the backdrop after open() via a
justOpened flag + capture-phase stopImmediatePropagation. Only click
is guarded — touchend is never synthesised, so legitimate touch
dismissal works immediately.

Add Playwright tests: open/close/re-open cycle, and a regression
guard that proves synthesised clicks still hit the backdrop (ensuring
the guard remains necessary).

Author: connorads

src/drawer/drawer.ts

@@ -42,6 +42,7 @@ export function createDrawer(
 	drawer.appendChild(grid)
 
 	let drawerOpen = false
+	let justOpened = false
 
 	for (const buttonDef of buttons) {
 		const button = el('button')
@@ -94,6 +95,14 @@ export function createDrawer(
 		backdrop.style.display = 'block'
 		drawer.classList.add('open')
 		drawerOpen = true
+		// Guard against synthesised click on backdrop. When onTap fires on
+		// touchend (no preventDefault), the browser synthesises mousedown/click
+		// ~4ms later at the same coordinates. By then the backdrop is visible
+		// and intercepts the click, immediately closing the drawer.
+		justOpened = true
+		setTimeout(() => {
+			justOpened = false
+		}, 300)
 	}
 
 	function close(): void {
@@ -106,7 +115,20 @@ export function createDrawer(
 		return drawerOpen
 	}
 
-	// Backdrop dismisses drawer
+	// Backdrop dismisses drawer. The click listener ignores the first click
+	// after open() to avoid synthesised click from the triggering touch.
+	// touchend is never synthesised, so it always works immediately.
+	backdrop.addEventListener(
+		'click',
+		(e: Event) => {
+			if (justOpened) {
+				justOpened = false
+				e.stopImmediatePropagation()
+			}
+		},
+		{ capture: true },
+	)
+
 	onTap(backdrop, () => {
 		const kbWasOpen = isKeyboardOpen()
 		haptic()

tests/playwright/smoke.spec.ts

@@ -32,7 +32,7 @@ test('help overlay shows version', async ({ page }) => {
 	await page.goto('/')
 	await page.waitForSelector('#wt-toolbar', { timeout: 10_000 })
 
-	// Open help via touchend (same pattern as touch.spec.ts — tap() can miss on mobile viewports)
+	// Open help via touchend — simulates iOS Safari not firing click on dynamic elements
 	const helpBtn = page.locator('#wt-font-controls button', { hasText: '?' })
 	await expect(helpBtn).toBeVisible()
 	await helpBtn.dispatchEvent('touchend', {

tests/playwright/touch.spec.ts

@@ -65,6 +65,66 @@ test('backdrop responds to touchend-only', async ({ page }) => {
 	await expect(page.locator('#wt-drawer')).not.toHaveClass(/open/)
 })
 
+test('drawer open → close → re-open cycle', async ({ page }) => {
+	const toggle = page.locator('#wt-toolbar button', { hasText: 'More' })
+	const drawer = page.locator('#wt-drawer')
+
+	// Open
+	await toggle.dispatchEvent('touchend', {
+		touches: [],
+		changedTouches: [],
+		targetTouches: [],
+	})
+	await expect(drawer).toHaveClass(/open/)
+
+	// Close via backdrop
+	await page.locator('#wt-backdrop').dispatchEvent('touchend', {
+		touches: [],
+		changedTouches: [],
+		targetTouches: [],
+	})
+	await expect(drawer).not.toHaveClass(/open/)
+
+	// Re-open via tap — synthesised click must not re-close
+	await toggle.tap()
+	await expect(drawer).toHaveClass(/open/)
+})
+
+test('synthesised click from tap() hits backdrop (regression guard)', async ({ page }) => {
+	// Proves the mechanism that caused the open-then-close bug still exists:
+	// after touchend opens the drawer, synthesised mousedown/click land on the
+	// backdrop. The justOpened guard in drawer.ts must block these.
+	// Listen at document level (capture phase) because the fix uses
+	// stopImmediatePropagation on the backdrop element.
+	await page.evaluate(() => {
+		const w = window as unknown as { __backdropClicks: { isTrusted: boolean }[] }
+		w.__backdropClicks = []
+		document.addEventListener(
+			'click',
+			(e) => {
+				if ((e.target as HTMLElement)?.id === 'wt-backdrop') {
+					w.__backdropClicks.push({ isTrusted: e.isTrusted })
+				}
+			},
+			{ capture: true },
+		)
+	})
+
+	const toggle = page.locator('#wt-toolbar button', { hasText: 'More' })
+	await toggle.tap()
+	await page.waitForTimeout(200)
+
+	const clicks = await page.evaluate(
+		() => (window as unknown as { __backdropClicks: { isTrusted: boolean }[] }).__backdropClicks,
+	)
+	// Synthesised click should have reached the backdrop
+	expect(clicks.length).toBeGreaterThan(0)
+	expect(clicks[0]?.isTrusted).toBe(true)
+
+	// But the drawer should still be open (guard blocked the close)
+	await expect(page.locator('#wt-drawer')).toHaveClass(/open/)
+})
+
 test('help button responds to touchend-only', async ({ page }) => {
 	const helpBtn = page.locator('#wt-font-controls button', { hasText: '?' })
 	await expect(helpBtn).toBeVisible()