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

adamziel · web-flow · commit c77fcd742e6b · 2024-10-11T15:19:48.000+02:00
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 `&lt;select&gt;` option moves the
focus back to `&lt;body&gt;`. 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
`&lt;Dropdown&gt;` 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
diff --git a/packages/playground/website/src/components/browser-chrome/index.tsx b/packages/playground/website/src/components/browser-chrome/index.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 import css from './style.module.css';
 import AddressBar from '../address-bar';
 import classNames from 'classnames';
+import { useMediaQuery } from '@wordpress/compose';
 import {
 	useAppSelector,
 	getActiveClientInfo,
 	useActiveSite,
 	useAppDispatch,
 } from '../../lib/state/redux/store';
 import { SyncLocalFilesButton } from '../sync-local-files-button';
-import { Dropdown, Icon } from '@wordpress/components';
+import { Dropdown, Icon, Modal } from '@wordpress/components';
 import { cog } from '@wordpress/icons';
 import Button from '../button';
 import { ActiveSiteSettingsForm } from '../site-manager/site-settings-form';
@@ -40,6 +41,10 @@ export default function BrowserChrome({
 		css.hasFullSizeWindow,
 		className
 	);
+	const isMobileUi = useMediaQuery('(max-width: 875px)');
+	const [isModalOpen, setIsModalOpen] = React.useState(false);
+	const onToggle = () => setIsModalOpen(!isModalOpen);
+	const closeModal = () => setIsModalOpen(false);
 
 	return (
 		<div className={wrapperClass} data-cy="simulated-browser">
@@ -74,16 +79,13 @@ export default function BrowserChrome({
 					</div>
 
 					<div className={css.toolbarButtons}>
-						<Dropdown
-							className="my-container-class-name"
-							contentClassName="my-dropdown-content-classname"
-							popoverProps={{ placement: 'bottom-start' }}
-							renderToggle={({ isOpen, onToggle }) => (
+						{isMobileUi ? (
+							<>
 								<Button
 									variant="browser-chrome"
 									aria-label="Edit Playground settings"
 									onClick={onToggle}
-									aria-expanded={isOpen}
+									aria-expanded={isModalOpen}
 									style={{
 										padding: '0 10px',
 										fill: '#FFF',
@@ -93,26 +95,59 @@ export default function BrowserChrome({
 								>
 									<Icon icon={cog} />
 								</Button>
-							)}
-							renderContent={({ onClose }) => (
-								<div
-									style={{
-										width: 400,
-										maxWidth: '100vw',
-										padding: 0,
-									}}
-								>
-									<div className={css.headerSection}>
-										<h2 style={{ margin: 0 }}>
-											Playground settings
-										</h2>
+								{isModalOpen && (
+									<Modal
+										isFullScreen={true}
+										title="Playground settings"
+										onRequestClose={closeModal}
+									>
+										<ActiveSiteSettingsForm
+											onSubmit={closeModal}
+										/>
+									</Modal>
+								)}
+							</>
+						) : (
+							<Dropdown
+								className="my-container-class-name"
+								contentClassName="my-dropdown-content-classname"
+								popoverProps={{ placement: 'bottom-start' }}
+								renderToggle={({ isOpen, onToggle }) => (
+									<Button
+										variant="browser-chrome"
+										aria-label="Edit Playground settings"
+										onClick={onToggle}
+										aria-expanded={isOpen}
+										style={{
+											padding: '0 10px',
+											fill: '#FFF',
+											alignItems: 'center',
+											display: 'flex',
+										}}
+									>
+										<Icon icon={cog} />
+									</Button>
+								)}
+								renderContent={({ onClose }) => (
+									<div
+										style={{
+											width: 400,
+											maxWidth: '100vw',
+											padding: 0,
+										}}
+									>
+										<div className={css.headerSection}>
+											<h2 style={{ margin: 0 }}>
+												Playground settings
+											</h2>
+										</div>
+										<ActiveSiteSettingsForm
+											onSubmit={onClose}
+										/>
 									</div>
-									<ActiveSiteSettingsForm
-										onSubmit={onClose}
-									/>
-								</div>
-							)}
-						/>
+								)}
+							/>
+						)}
 						{activeSite?.metadata?.storage === 'local-fs' ? (
 							<SyncLocalFilesButton />
 						) : null}
