don't let route tabs eat cmd+arrow keypresses (#3020)

Author: david-crespo

app/components/RouteTabs.tsx

@@ -10,9 +10,12 @@ import type { ReactNode } from 'react'
 import { Link, Outlet } from 'react-router'
 
 import { useIsActivePath } from '~/hooks/use-is-active-path'
-import { KEYS } from '~/ui/util/keys'
+import { hasModifier, KEYS } from '~/ui/util/keys'
 
 const selectTab = (e: React.KeyboardEvent<HTMLDivElement>) => {
+  // Don't intercept modified arrow keys (Cmd for browser back/forward, etc.)
+  if (hasModifier(e)) return
+
   const target = e.target as HTMLDivElement
   if (e.key === KEYS.left) {
     e.stopPropagation()

app/ui/util/keys.ts

@@ -21,3 +21,8 @@ export const KEYS = {
   space: ' ',
   escape: 'Escape',
 } as const
+
+/** Returns true if any modifier key is held */
+export const hasModifier = (
+  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'shiftKey' | 'altKey'>
+) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey