From 4adbc76e2de69192742aaf114ac33cf82dca968e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Sun, 19 May 2024 15:59:21 +0200
Subject: [PATCH] Prevent pressing escape when editing document name to bubble
 up to the editor (#3725)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This prevents pressing escape to bubble to up to editor when editing
document names. Prevents the current tool to change back to select tool.

### Before

Pressing escape when editing the name stops the editing, but also
switches from hand tool to select tool.


https://github.com/tldraw/tldraw/assets/2523721/445ec4ca-73b9-4db3-a3e8-bd408d868c6f

### After

We no longer switch to hand tool when we press escape the first time.
The second time it still works though.


https://github.com/tldraw/tldraw/assets/2523721/fbab7d97-0d87-47cb-b249-b20655f8bc70

@mimecuvalo happy to wait for your focus management PR to get merged,
then update accordingly by using `editor.focus()`.

### Change Type

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

- [ ] `sdk` — Changes the tldraw SDK
- [x] `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 ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `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


### Test Plan

1. Edit document name.
2. Press escape. It should stop editing the document name, but should
not switch the active tool to select tool.
3. Pressing escape once again should do it though. Also keyboard
shortcuts should also work.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Prevent escaping out of editing the document name to switch the active
tool to select tool.
---
 .../src/components/DocumentName/DocumentName.tsx       | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/dotcom/src/components/DocumentName/DocumentName.tsx b/apps/dotcom/src/components/DocumentName/DocumentName.tsx
index 6365773dd..0caafe9ac 100644
--- a/apps/dotcom/src/components/DocumentName/DocumentName.tsx
+++ b/apps/dotcom/src/components/DocumentName/DocumentName.tsx
@@ -20,6 +20,8 @@ import {
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
 	TldrawUiKbd,
+	preventDefault,
+	stopEventPropagation,
 	track,
 	useActions,
 	useBreakpoint,
@@ -258,18 +260,20 @@ const DocumentNameEditor = track(function DocumentNameEditor({
 	const handleKeydownCapture = useCallback(
 		(e: KeyboardEvent) => {
 			if (e.key === 'Enter') {
-				e.preventDefault()
+				preventDefault(e)
 				// blur triggers save
 				inputRef.current?.blur()
 			} else if (e.key === 'Escape') {
-				e.preventDefault()
+				preventDefault(e)
+				stopEventPropagation(e)
 				// revert to original name instantly so that when we blur we don't
 				// trigger a save with the new one
 				setState((prev) => ({ ...prev, name: null }))
 				inputRef.current?.blur()
+				editor.getContainer().focus()
 			}
 		},
-		[setState]
+		[setState, editor]
 	)
 
 	const handleBlur = useCallback(() => {