Prevent pressing escape when editing document name to bubble up to the editor (#3725)
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.
This commit is contained in:
parent
48512995b4
commit
4adbc76e2d
1 changed files with 7 additions and 3 deletions
|
@ -20,6 +20,8 @@ import {
|
||||||
TldrawUiDropdownMenuRoot,
|
TldrawUiDropdownMenuRoot,
|
||||||
TldrawUiDropdownMenuTrigger,
|
TldrawUiDropdownMenuTrigger,
|
||||||
TldrawUiKbd,
|
TldrawUiKbd,
|
||||||
|
preventDefault,
|
||||||
|
stopEventPropagation,
|
||||||
track,
|
track,
|
||||||
useActions,
|
useActions,
|
||||||
useBreakpoint,
|
useBreakpoint,
|
||||||
|
@ -258,18 +260,20 @@ const DocumentNameEditor = track(function DocumentNameEditor({
|
||||||
const handleKeydownCapture = useCallback(
|
const handleKeydownCapture = useCallback(
|
||||||
(e: KeyboardEvent) => {
|
(e: KeyboardEvent) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
e.preventDefault()
|
preventDefault(e)
|
||||||
// blur triggers save
|
// blur triggers save
|
||||||
inputRef.current?.blur()
|
inputRef.current?.blur()
|
||||||
} else if (e.key === 'Escape') {
|
} else if (e.key === 'Escape') {
|
||||||
e.preventDefault()
|
preventDefault(e)
|
||||||
|
stopEventPropagation(e)
|
||||||
// revert to original name instantly so that when we blur we don't
|
// revert to original name instantly so that when we blur we don't
|
||||||
// trigger a save with the new one
|
// trigger a save with the new one
|
||||||
setState((prev) => ({ ...prev, name: null }))
|
setState((prev) => ({ ...prev, name: null }))
|
||||||
inputRef.current?.blur()
|
inputRef.current?.blur()
|
||||||
|
editor.getContainer().focus()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setState]
|
[setState, editor]
|
||||||
)
|
)
|
||||||
|
|
||||||
const handleBlur = useCallback(() => {
|
const handleBlur = useCallback(() => {
|
||||||
|
|
Loading…
Reference in a new issue