Inputs example broken on iOS Firefox

[12joan]

The inputs example works reasonaly well on iOS Safari, but is practically unusable on iOS Firefox. This is the result of two bugs, where the second exacerbates the first:

• iOS Safari and iOS Firefox: touchstart events on inputs cause those inputs to focus on touchend, even if the user intended to scroll.
• iOS Firefox only: The height of the drawer is reduced after closing the keyboard, forcing users to scroll to see all the content.

Recording

RPReplay_Final1727423291.MP4

Timeline and reproduction steps

• 0:00: Press Open Drawer
• 0:03: Tap the project name field and type "Test"
  • The content is pushed up correctly
• 0:05: Press done to close the keyboard
  • ⚠️ The height of the drawer is now incorrect
• 0:07: Scroll down by placing finger on the "Get started" text and scroll back up
  • This works fine, and allows me to view the description field
• 0:10: Attempt to scroll down by placing finger on the product name field
  • ⚠️ Instead of scrolling, the product name field is focused
• 0:11: Close the keyboard
• 0:12: Scroll down, tap the description field and type "Test"
  • The content is pushed up correctly
• 0:17: Close the keyboard
• 0:18: Attempt to scroll up by placing finger on the description field
  • ⚠️ Instead of scrolling, the description field is focused
• 0:20: Close the keyboard and try again to scroll up
  • ⚠️ Same result, except the scroll is successful up until touchend, when the description is focused again

[sunwrobert]

Also noticing this same thing as well as general bugginess with iOS esp in PWA contexts. @emilkowalski any ideas?

[emilkowalski]

Fixed in #489