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

When hovering over options in the metric selector listbox,
setFocused(true) was triggering a useEffect in useSelectableItem that
called focusSafely(ref.current), stealing DOM focus from the search
input. Replace setFocused(true) with only setFocusedKey for hover, and
track hover state separately so options still get visual focus styling
without moving actual DOM focus.

Co-Authored-By: Claude Opus 4 <noreply@anthropic.com>
Made-with: Cursor

Author: nsdeschenes

static/app/views/explore/metrics/metricToolbar/metricSelector.tsx

@@ -597,16 +597,21 @@ function MetricListBoxOption({
 }: 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,
     ref
   );
   const optionPropsMerged = mergeProps(optionProps, {
     onMouseEnter: () => {
-      listState.selectionManager.setFocused(true);
+      // Only update focusedKey — do NOT call setFocused(true).
+      // 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 (
@@ -617,7 +622,7 @@ function MetricListBoxOption({
       ref={mergeRefs(ref, measureRef)}
       size={size}
       label={option.label}
-      isFocused={listState.selectionManager.isFocused && isFocused}
+      isFocused={isFocused || isHovered}
       isSelected={isSelected}
       isPressed={isPressed}
       disabled={isDisabled}