Skip to content

Website: Use modal for Site settings form on mobile – mobile Safari l… - #1885

Merged
adamziel merged 3 commits into
trunkfrom
settings-modal
Oct 11, 2024
Merged

Website: Use modal for Site settings form on mobile – mobile Safari l…#1885
adamziel merged 3 commits into
trunkfrom
settings-modal

Conversation

@adamziel

@adamziel adamziel commented Oct 10, 2024 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Description

Replaces the site settings dropdown with a modal that remains open until the user:

  • Clicks outside of the dropdown
  • Clicks the dropdown toggle button
  • Presses the Escape key

Why?

Mobile Safari has a bug where selecting a <select> option moves the
focus back to <body>. Unfortunately, this also closes the @wordpress/components
dropdowns which react to the onFocusOutside callback.

Alternatives tried

  • Using a Dropdown with a backdrop layer that closes it on tap. I couldn't get it to work without the same focus issue also affecting it, even after overwriting the open property. As it turns out, the <Dropdown> component is hardwired to call onToggle() both when the x is pressed AND when the focus is lost.

Testing instructions

  • Open Playground on an iPhone or iPhone simulator
  • Confirm you can open the site settings form and change selection without closing the form
  • Confirm that submitting the form closes the modal
  • Confirm you're still getting the dropdown on desktop
@adamziel
adamziel marked this pull request as ready for review October 11, 2024 11:38
@adamziel adamziel added [Type] Bug An existing feature does not function as intended [Type] UI / UX / User Experience [Aspect] Website labels Oct 11, 2024
@adamziel
adamziel merged commit c77fcd7 into trunk Oct 11, 2024
@adamziel
adamziel deleted the settings-modal branch October 11, 2024 13:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Aspect] Website [Type] Bug An existing feature does not function as intended [Type] UI / UX / User Experience

1 participant

@adamziel