Fix text editing in page menu popover (#1790)

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Resize the page so that the page menu scrolls
2. Edit the title of the last item
3. Click around the titles

### Release Notes

- (fix) page menu editing

packages/tldraw/src/lib/ui/TldrawUi.tsx

@@ -1,5 +1,5 @@
 import { ToastProvider } from '@radix-ui/react-toast'
-import { preventDefault, useEditor, useValue } from '@tldraw/editor'
+import { useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import React, { ReactNode } from 'react'
 import { TldrawUiContextProvider, TldrawUiContextProviderProps } from './TldrawUiContextProvider'
@@ -135,7 +135,6 @@ const TldrawUiContent = React.memo(function TldrawUI({
 				className={classNames('tlui-layout', {
 					'tlui-layout__mobile': breakpoint < 5,
 				})}
-				onPointerDown={preventDefault}
 			>
 				{isFocusMode ? (
 					<div className="tlui-layout__top">

packages/tldraw/src/lib/ui/components/PageMenu/PageMenu.tsx

@@ -108,7 +108,7 @@ export const PageMenu = function PageMenu() {
 				}
 			}
 		})
-	}, [ITEM_HEIGHT, currentPage, isOpen])
+	}, [ITEM_HEIGHT, currentPage.id, isOpen])
 
 	const handlePointerDown = useCallback(
 		(e: React.PointerEvent<HTMLButtonElement>) => {
@@ -336,8 +336,6 @@ export const PageMenu = function PageMenu() {
 										</Button>
 									) : (
 										<div
-											id={`page-menu-item-${page.id}`}
-											data-testid={`page-menu-item-${page.id}`}
 											className="tlui-page_menu__item__sortable__title"
 											style={{ height: ITEM_HEIGHT }}
 										>

packages/tldraw/src/lib/ui/components/primitives/Input.tsx

@@ -1,3 +1,4 @@
+import { useEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -54,6 +55,7 @@ export const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function
 	},
 	ref
 ) {
+	const editor = useEditor()
 	const rInputRef = React.useRef<HTMLInputElement>(null)
 
 	// combine rInputRef and ref
@@ -118,6 +120,8 @@ export const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function
 	)
 
 	React.useEffect(() => {
+		if (!editor.environment.isIos) return
+
 		const visualViewport = window.visualViewport
 		if (isFocused && shouldManuallyMaintainScrollPositionWhenFocused && visualViewport) {
 			const onViewportChange = () => {
@@ -135,7 +139,7 @@ export const Input = React.forwardRef<HTMLInputElement, TLUiInputProps>(function
 				visualViewport.removeEventListener('scroll', onViewportChange)
 			}
 		}
-	}, [isFocused, shouldManuallyMaintainScrollPositionWhenFocused])
+	}, [editor, isFocused, shouldManuallyMaintainScrollPositionWhenFocused])
 
 	return (
 		<div draggable={false} className="tlui-input__wrapper">