fix: immediately dismissing popovers on iOS (#1893)

#57

I believe this bug happens because littlefoot handles both `touchend`
and `click` event types with the same handler. On iOS and possibly other
touch browsers, both events could be delivered each time the user taps
the screen. The best practice is to call `event.preventDefault()` when
handling the touch event to prevent the subsequent simulated mouse event
from firing.

src/dom/events.ts

@@ -44,6 +44,8 @@ export function addListeners(useCases: UseCases): () => void {
     const element = closestTarget(event, SELECTOR_BUTTON)
     const id = getFootnoteId(element)
     if (id) {
+      // Prevent running the handler more than once.
+      event.preventDefault()
       useCases.toggle(id)
     } else if (!closestTarget(event, SELECTOR_POPOVER)) {
       useCases.touchOutside()

test/activate.test.ts

@@ -1,5 +1,5 @@
 import { test, expect, afterEach, beforeEach, vi } from 'vitest'
-import { fireEvent } from '@testing-library/dom'
+import { fireEvent, createEvent } from '@testing-library/dom'
 import {
   setDocumentBody,
   waitToStopChanging,
@@ -31,6 +31,15 @@ test('activate footnote when clicking the button', async () => {
   expect(popover).toHaveClass('is-active')
 })
 
+test('activation touch event has preventDefault (#57)', async () => {
+  littlefoot(TEST_SETTINGS)
+  const button = getButton('1')
+
+  const event = createEvent.touchEnd(button)
+  fireEvent(button, event)
+  expect(event.defaultPrevented).toBe(true)
+})
+
 test('does not insert empty paragraphs in the footnote content (#187)', async () => {
   littlefoot(TEST_SETTINGS)
   const button = getButton('1')