fix(metrics): Keep input focus in metric selector by syncing overlay with combobox state

Remove the stateGuard ref and re-entrant open/close synchronization
between useOverlay and useComboBoxState. Instead, pass comboBoxState's
isOpen directly to useOverlay and let each hook manage its own state
with a simple bridging onOpenChange. Filter duplicate onSelectionChange
fires by checking comboBoxState.isOpen.

Fixes LOGS-627
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: nsdeschenes

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

@@ -242,31 +242,8 @@ export function MetricSelector({
     [displayedOptions]
   );
 
-  // Guards against re-entrant open/close calls between useOverlay and
-  // useComboBoxState (which each sync into the other's state), and tracks
-  // the last key handled by onSelectionChange to deduplicate (useComboBoxState
-  // fires it twice: once on select, once on close).
-  const stateGuardRef = useRef({syncing: false, lastSelection: null as string | null});
-
-  function handleOpenChange(open: boolean) {
-    if (stateGuardRef.current.syncing) {
-      return;
-    }
-    stateGuardRef.current.syncing = true;
-    try {
-      if (open) {
-        comboBoxState.open();
-        overlayState.open();
-      } else {
-        comboBoxState.close();
-        overlayState.close();
-      }
-    } finally {
-      stateGuardRef.current.syncing = false;
-    }
-
+  function handleOverlayOpenChange(open: boolean) {
     if (open) {
-      stateGuardRef.current.lastSelection = null;
       nextFrameCallback(() => updateOverlay?.());
       return;
     }
@@ -287,24 +264,6 @@ export function MetricSelector({
     });
   }
 
-  const {
-    isOpen,
-    state: overlayState,
-    triggerProps,
-    overlayProps,
-    triggerRef,
-    update: updateOverlay,
-  } = useOverlay({
-    type: 'listbox',
-    position: 'bottom-start',
-    offset: 6,
-    isDismissable: true,
-    isKeyboardDismissDisabled: true,
-    shouldApplyMinWidth: true,
-    disableTrigger: isFetching && !traceMetric.name,
-    onOpenChange: handleOpenChange,
-  });
-
   const comboBoxState = useComboBoxState<MetricSelectOption>({
     children: (item: MetricSelectOption) => <Item key={item.value}>{item.label}</Item>,
     items: displayedOptions,
@@ -315,16 +274,9 @@ export function MetricSelector({
     onInputChange: setSearchInputValue,
     selectedKey: traceMetric.name ? traceMetricSelectValue : null,
     onSelectionChange: key => {
-      if (!key) {
+      if (!key || !comboBoxState.isOpen) {
         return;
       }
-      // useComboBoxState fires onSelectionChange twice per selection: once
-      // when the key is selected, and once during close via commitSelection.
-      // Deduplicate by tracking the last key we handled.
-      if (String(key) === stateGuardRef.current.lastSelection) {
-        return;
-      }
-      stateGuardRef.current.lastSelection = String(key);
       const selectedOption = displayedOptionsMap.get(String(key));
       if (selectedOption) {
         onChange({
@@ -334,7 +286,36 @@ export function MetricSelector({
         });
       }
     },
-    onOpenChange: handleOpenChange,
+    onOpenChange: handleOverlayOpenChange,
+  });
+
+  const {
+    isOpen,
+    state: overlayState,
+    triggerProps,
+    overlayProps,
+    triggerRef,
+    update: updateOverlay,
+  } = useOverlay({
+    type: 'listbox',
+    position: 'bottom-start',
+    offset: 6,
+    isOpen: comboBoxState.isOpen,
+    isDismissable: true,
+    isKeyboardDismissDisabled: true,
+    shouldApplyMinWidth: true,
+    disableTrigger: isFetching && !traceMetric.name,
+    onOpenChange: open => {
+      if (open === comboBoxState.isOpen) {
+        return;
+      }
+
+      if (open) {
+        comboBoxState.open();
+      } else {
+        comboBoxState.close();
+      }
+    },
   });
 
   const {inputProps: comboBoxInputProps, listBoxProps} = useComboBox<MetricSelectOption>(