From 7104515c9c36464a14da200baa5e1ea09a7fbd2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Tue, 16 Apr 2024 17:15:13 +0100
Subject: [PATCH] textfields: wait a tick before selecting all to fix iOS
 (#3501)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes https://github.com/tldraw/tldraw/issues/3500

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know
---
 .../src/lib/shapes/shared/useEditableText.ts    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/tldraw/src/lib/shapes/shared/useEditableText.ts b/packages/tldraw/src/lib/shapes/shared/useEditableText.ts
index 43a2ee35f..696a2279f 100644
--- a/packages/tldraw/src/lib/shapes/shared/useEditableText.ts
+++ b/packages/tldraw/src/lib/shapes/shared/useEditableText.ts
@@ -39,15 +39,18 @@ export function useEditableText(
 
 	useEffect(() => {
 		function selectAllIfEditing({ shapeId }: { shapeId: TLShapeId }) {
-			if (shapeId === id) {
-				const elm = rInput.current
-				if (elm) {
-					if (document.activeElement !== elm) {
-						elm.focus()
+			// We wait a tick, because on iOS, the keyboard will not show if we focus immediately.
+			requestAnimationFrame(() => {
+				if (shapeId === id) {
+					const elm = rInput.current
+					if (elm) {
+						if (document.activeElement !== elm) {
+							elm.focus()
+						}
+						elm.select()
 					}
-					elm.select()
 				}
-			}
+			})
 		}
 		editor.on('select-all-text', selectAllIfEditing)
 		return () => {