From 17bb36a7feecb7c8338cbd6d73a103235d32d5b8 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Thu, 8 Aug 2024 10:06:36 +0200
Subject: [PATCH] fix(ui): reset higlighted action on keyboard navigation
 (#32051)

Closes https://github.com/microsoft/playwright/issues/32050

When keyboarding through the action view, the UI continues showing the
hovered action. This makes keyboard nav hard to use.

The fix is to reset the higlighted action on keyboard navigation. This
is what we do when the mouse pointer leaves an action, and what I think
is reasonable.
---
 packages/trace-viewer/src/ui/workbench.tsx | 3 ++-
 packages/web/src/components/listView.tsx   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx
index c2e9075480..01ae6142bd 100644
--- a/packages/trace-viewer/src/ui/workbench.tsx
+++ b/packages/trace-viewer/src/ui/workbench.tsx
@@ -113,8 +113,9 @@ export const Workbench: React.FunctionComponent<{
 
   const onActionSelected = React.useCallback((action: modelUtil.ActionTraceEventInContext) => {
     setSelectedAction(action);
+    setHighlightedAction(undefined);
     onSelectionChanged?.(action);
-  }, [setSelectedAction, onSelectionChanged]);
+  }, [setSelectedAction, onSelectionChanged, setHighlightedAction]);
 
   const selectPropertiesTab = React.useCallback((tab: string) => {
     setSelectedPropertiesTab(tab);
diff --git a/packages/web/src/components/listView.tsx b/packages/web/src/components/listView.tsx
index df8a2deca0..a932bf7435 100644
--- a/packages/web/src/components/listView.tsx
+++ b/packages/web/src/components/listView.tsx
@@ -128,6 +128,7 @@ export function ListView<T>({
         scrollIntoViewIfNeeded(element || undefined);
         onHighlighted?.(undefined);
         onSelected?.(items[newIndex], newIndex);
+        setHighlightedItem(undefined);
       }}
       ref={itemListRef}
     >