From 27a8eb09990ce15ada9a6d844d159097ab660588 Mon Sep 17 00:00:00 2001
From: Marcos Hernanz <96699542+marcoshernanz@users.noreply.github.com>
Date: Sun, 23 Aug 2026 11:56:26 -0700
Subject: [PATCH] [devtools] Fix indicator dragging on touch screens (#97723)

### What?

- Restore `touch-action: none` on the draggable devtools indicator.
- Add integration coverage for the draggable computed touch action.

### Why?

PR #86816 made devtools content selectable, but also removed
`touch-action: none` with the selection styles. On touch screens, that
allows the browser to claim the gesture for viewport panning and
suppress the pointer event stream, causing the indicator to stop moving.

### How?

Keep the drag-lifecycle selection handling introduced by #86816 and
restore only `touch-action: none` before the gesture begins.

Fixes #97668

### Testing

- `pnpm build --filter next`
- Targeted Prettier and ESLint checks
- `NEXT_SKIP_ISOLATE=1 pnpm test-dev
test/development/app-dir/devtools-position/default-position.test.ts`
---
 .../errors/dev-tools-indicator/draggable.tsx    |  7 ++++++-
 .../devtools-position/default-position.test.ts  | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
index 93a9e04681e7..c6667bb84e45 100644
--- a/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
+++ b/packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/draggable.tsx
@@ -143,7 +143,12 @@ export function Draggable({
   }
 
   return (
-    <div {...props} {...drag} ref={ref}>
+    <div
+      {...props}
+      {...drag}
+      ref={ref}
+      style={{ touchAction: 'none', ...props.style }}
+    >
       {children}
     </div>
   )
diff --git a/test/development/app-dir/devtools-position/default-position.test.ts b/test/development/app-dir/devtools-position/default-position.test.ts
index 1a162d305d79..b47bc348cc91 100644
--- a/test/development/app-dir/devtools-position/default-position.test.ts
+++ b/test/development/app-dir/devtools-position/default-position.test.ts
@@ -12,4 +12,21 @@ describe('devtools-position-default', () => {
     expect(style).toContain('bottom: 20px')
     expect(style).toContain('left: 20px')
   })
+
+  it('should disable browser touch gestures on the draggable indicator', async () => {
+    const browser = await next.browser('/')
+    await getDevIndicatorPosition(browser)
+
+    const touchAction = await browser.eval(() => {
+      const portal = Array.from(
+        document.querySelectorAll('nextjs-portal')
+      ).find((p) => p.shadowRoot?.querySelector('[data-nextjs-toast]'))
+      const indicator = portal?.shadowRoot?.querySelector('[data-nextjs-toast]')
+      const draggable = indicator?.firstElementChild
+
+      return draggable ? getComputedStyle(draggable).touchAction : null
+    })
+
+    expect(touchAction).toBe('none')
+  })
 })