Middle-click causes forward-navigation #3008

Activity

1. AMDphreak

   added

   kind/bugSomething isn't workingSomething isn't working

   status/needs-triage

   on Feb 1, 2026
2. tembo commented on Feb 1, 2026

   

   tembobot

   on Feb 1, 2026 – with Tembo

   Contributor

   More actions

   Issue Validation

   This is a valid bug. The v2 codebase is missing the middle-click prevention handler that existed in v1. In browsers, middle-click (button 1) fires the standard click event in addition to auxclick, which causes onClick handlers with navigate() calls to trigger unintended navigation.

   Relevant Code

   The core navigation components use onClick handlers without checking e.button:

   • packages/interface/src/components/SpacesSidebar/SpaceItem.tsx:238-250 - Navigation on click without button filtering
   • packages/interface/src/routes/explorer/Sidebar.tsx:149-161 - SidebarItem onClick handlers
   • packages/interface/src/routes/overview/DevicePanel.tsx:600-608 - Location button onClick

   These all call navigate(path) or trigger state changes on any click, including middle-click.

   What's Happening

   When user middle-clicks:

   1. Middle mouse button fires both click and auxclick events
   2. The onClick handlers in navigation components execute
   3. navigate() is called, causing forward navigation to a previously visited route
   4. The cursor gets stuck in scroll-click mode because the native autoscroll behavior is interrupted

   In v1, this was fixed in commit 55d2ec7a ("[ENG-1663] Prevent middle-click opening new tab") by adding:

   useEffect(() => {
     const handleClick = (e: MouseEvent) => {
       if (e.button === 1) e.preventDefault();
     };
     document.addEventListener('auxclick', handleClick);
     return () => document.removeEventListener('auxclick', handleClick);
   }, []);

   This handler is not present in the v2 codebase.

   Potential Approaches

   1. Global auxclick prevention (Recommended) - Add a global auxclick handler in App.tsx or ShellLayout.tsx that prevents default for middle-click. This is the same approach used in v1.

   2. Button filtering in onClick handlers - Update all onClick handlers to check e.button === 0 before navigating. More surgical but requires touching many files.

   3. Custom Link component - Create a wrapper component similar to v1's Link.tsx that handles middle-click properly, then migrate navigation to use it.

   4. React Router Link with proper handling - Use React Router's <Link> component instead of buttons with navigate(), then add auxclick prevention to prevent opening new tabs.

   Investigation Notes

   • This is a regression from v1 where the fix was explicitly implemented
   • The issue specifically manifests on Windows because autoscroll (middle-click drag scrolling) is a Windows-native feature
   • The cursor getting stuck is because the navigation interrupts the native autoscroll state machine
   • Both the Overview page location buttons and sidebar navigation items are affected
3. alfinaloshi

   added 3 commits that reference this issue on Apr 23, 2026

   fix(interface): prevent middle-click forward-navigation on Windows (s…

   ...

   c55eb70

   fix(interface): prevent middle-click forward-navigation on Windows (s…

   ...

   9af7f16

   fix(interface): prevent middle-click forward-navigation on Windows (s…

   ...

   6eca861