From fa3464ca8c7be1e5c40b99baaa1efa4e1f6e550c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Tue, 16 Apr 2024 16:54:03 +0100
Subject: [PATCH] textfields: fix dragging selected shape behind another
 (#3498)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The fix here was that we need to check if we're editing before
dispatching the pointer down event. This is some leftover DNA from code
when we had textareas always present and when
tl-svg-container/tl-html-container wasn't around. The
`setPointerCapture` was originally fixing a bug where dragging a shape
using the textlabel as the origin would start to breakdown when you got
to UI toolbar/panel.

Also, turns out we don't need the `setPointerCapture` anymore because of
the same reason.

### 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       | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/tldraw/src/lib/shapes/shared/useEditableText.ts b/packages/tldraw/src/lib/shapes/shared/useEditableText.ts
index b0c5fe639..43a2ee35f 100644
--- a/packages/tldraw/src/lib/shapes/shared/useEditableText.ts
+++ b/packages/tldraw/src/lib/shapes/shared/useEditableText.ts
@@ -3,7 +3,6 @@ import {
 	TLUnknownShape,
 	getPointerInfo,
 	preventDefault,
-	setPointerCapture,
 	stopEventPropagation,
 	useEditor,
 	useValue,
@@ -178,6 +177,11 @@ export function useEditableText(
 
 	const handleInputPointerDown = useCallback(
 		(e: React.PointerEvent) => {
+			// This is important that we only dispatch when editing.
+			// Otherwise, you can get into a state where you're editing
+			// able to drag a selected shape behind another shape.
+			if (!isEditing) return
+
 			editor.dispatch({
 				...getPointerInfo(e),
 				type: 'pointer',
@@ -187,14 +191,8 @@ export function useEditableText(
 			})
 
 			stopEventPropagation(e) // we need to prevent blurring the input
-
-			// This is important so that when dragging a shape using the text label,
-			// the shape continues to be dragged, even if the cursor is over the UI.
-			if (editor.getEditingShapeId() !== id) {
-				setPointerCapture(e.currentTarget, e)
-			}
 		},
-		[editor, id]
+		[editor, id, isEditing]
 	)
 
 	const handleDoubleClick = stopEventPropagation