Only warn about mouse movement when the mouse is down. (#13101)

packages/cli/src/ui/contexts/MouseContext.tsx

@@ -100,7 +100,8 @@ export function MouseProvider({
         !handled &&
         event.name === 'move' &&
         event.col >= 0 &&
-        event.row >= 0
+        event.row >= 0 &&
+        event.button === 'left'
       ) {
         // Terminal apps only receive mouse move events when the mouse is down
         // so this always indicates a mouse drag that the user was expecting

packages/cli/src/ui/contexts/ScrollProvider.drag.test.tsx

@@ -113,6 +113,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -125,6 +126,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -142,6 +144,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -159,6 +162,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -172,6 +176,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
     }
     expect(scrollBy).not.toHaveBeenCalled();
@@ -209,6 +214,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -231,6 +237,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -268,6 +275,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -305,6 +313,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -342,6 +351,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -407,6 +417,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -424,6 +435,7 @@ describe('ScrollProvider Drag', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
     // Expect scrollTo to be called with target and duration 0

packages/cli/src/ui/contexts/ScrollProvider.test.tsx

@@ -110,6 +110,7 @@ describe('ScrollProvider', () => {
             shift: false,
             ctrl: false,
             meta: false,
+            button: 'none',
           }) === true
         ) {
           handled = true;
@@ -147,6 +148,7 @@ describe('ScrollProvider', () => {
             shift: false,
             ctrl: false,
             meta: false,
+            button: 'none',
           }) === true
         ) {
           handled = true;
@@ -193,6 +195,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -226,6 +229,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -258,6 +262,7 @@ describe('ScrollProvider', () => {
       shift: false,
       ctrl: false,
       meta: false,
+      button: 'none',
     };
     for (const callback of mockUseMouseCallbacks) {
       callback(mouseEvent);
@@ -303,6 +308,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
       callback({
         name: 'scroll-down',
@@ -311,6 +317,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
       callback({
         name: 'scroll-up',
@@ -319,6 +326,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
     }
 
@@ -358,6 +366,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
       callback({
         name: 'scroll-down',
@@ -366,6 +375,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
       callback({
         name: 'scroll-down',
@@ -374,6 +384,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'none',
       });
     }
 
@@ -417,6 +428,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -429,6 +441,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -441,6 +454,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -475,6 +489,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -487,6 +502,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 
@@ -498,6 +514,7 @@ describe('ScrollProvider', () => {
         shift: false,
         ctrl: false,
         meta: false,
+        button: 'left',
       });
     }
 

packages/cli/src/ui/utils/mouse.test.ts

@@ -27,6 +27,7 @@ describe('mouse utils', () => {
         shift: false,
         meta: false,
         ctrl: false,
+        button: 'left',
       });
       expect(result!.length).toBe(input.length);
     });
@@ -43,6 +44,7 @@ describe('mouse utils', () => {
         shift: false,
         meta: false,
         ctrl: false,
+        button: 'left',
       });
     });
 
@@ -58,6 +60,7 @@ describe('mouse utils', () => {
         shift: true,
         meta: true,
         ctrl: true,
+        button: 'left',
       });
     });
 
@@ -67,6 +70,7 @@ describe('mouse utils', () => {
       const result = parseSGRMouseEvent(input);
       expect(result).not.toBeNull();
       expect(result!.event.name).toBe('move');
+      expect(result!.event.button).toBe('left');
     });
 
     it('parses SGR scroll events', () => {
@@ -100,6 +104,7 @@ describe('mouse utils', () => {
         shift: false,
         meta: false,
         ctrl: false,
+        button: 'left',
       });
       expect(result!.length).toBe(6);
     });

packages/cli/src/ui/utils/mouse.ts

@@ -33,6 +33,7 @@ export interface MouseEvent {
   shift: boolean;
   meta: boolean;
   ctrl: boolean;
+  button: 'left' | 'middle' | 'right' | 'none';
 }
 
 export type MouseHandler = (event: MouseEvent) => void | boolean;
@@ -71,6 +72,20 @@ export function getMouseEventName(
   }
 }
 
+function getButtonFromCode(code: number): MouseEvent['button'] {
+  const button = code & 3;
+  switch (button) {
+    case 0:
+      return 'left';
+    case 1:
+      return 'middle';
+    case 2:
+      return 'right';
+    default:
+      return 'none';
+  }
+}
+
 export function parseSGRMouseEvent(
   buffer: string,
 ): { event: MouseEvent; length: number } | null {
@@ -98,6 +113,7 @@ export function parseSGRMouseEvent(
           shift,
           col,
           row,
+          button: getButtonFromCode(buttonCode),
         },
         length: match[0].length,
       };
@@ -165,8 +181,21 @@ export function parseX11MouseEvent(
   }
 
   if (name) {
+    let button = getButtonFromCode(b);
+    if (name === 'left-release' && button === 'none') {
+      button = 'left';
+    }
+
     return {
-      event: { name, ctrl, meta, shift, col, row },
+      event: {
+        name,
+        ctrl,
+        meta,
+        shift,
+        col,
+        row,
+        button,
+      },
       length: match[0].length,
     };
   }