fix(metrics): Prevent metric selector hover from stealing search input focus

[nsdeschenes]

This PR refactors the metrics selector from a list state setup over to a combobox state setup. This resolves the issue with the input losing focus, as well as bringing the selector more in line with what we're trying to achieve with it.

[linear-code]

LOGS-627 Hovering items in the dropdown loses input focus

[nsdeschenes]

@sentry review

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Two items can show focus styling simultaneously
  • Replaced isFocused || isHovered with listState.selectionManager.isFocused && isFocused to properly coordinate focus styling using the list's focus state as a guard.
• ✅ Fixed: Stale focus persists after mouse leaves hovered item
  • Removed redundant isHovered state and onMouseLeave handler; the proper focus guard now ensures focus styling is cleared when the list loses focus.

Or push these changes by commenting:

@cursor push f8f85efef0

Preview (f8f85efef0)

diff --git a/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx b/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx
--- a/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx
+++ b/static/app/views/explore/metrics/metricToolbar/metricSelector.tsx
@@ -597,7 +597,6 @@
 }: MetricListBoxOptionProps) {
   const ref = useRef<HTMLLIElement>(null);
   const option = item.value!;
-  const [isHovered, setIsHovered] = useState(false);
   const {optionProps, isFocused, isSelected, isDisabled, isPressed} = useOption(
     {key: item.key, 'aria-label': option.label},
     listState,
@@ -609,9 +608,7 @@
       // setFocused(true) triggers a useEffect in useSelectableItem that calls
       // focusSafely(ref.current), which would steal DOM focus from the search input.
       listState.selectionManager.setFocusedKey(item.key);
-      setIsHovered(true);
     },
-    onMouseLeave: () => setIsHovered(false),
   });
 
   return (
@@ -622,7 +619,7 @@
       ref={mergeRefs(ref, measureRef)}
       size={size}
       label={option.label}
-      isFocused={isFocused || isHovered}
+      isFocused={listState.selectionManager.isFocused && isFocused}
       isSelected={isSelected}
       isPressed={isPressed}
       disabled={isDisabled}

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[k-fish]

Do we need to hand roll input logic? Doesn't react aria combobox do this?

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}