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

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.

---------

Co-authored-by: Claude Opus 4 <noreply@anthropic.com>
Co-authored-by: Claude Sonnet 4 <noreply@example.com>

Author: 3 people

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

@@ -147,6 +147,25 @@ describe('MetricSelector', () => {
       });
     });
 
+    it('dismisses outside click without committing the current keyboard focus', async () => {
+      const onChange = jest.fn();
+      render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={onChange} />, {
+        organization,
+      });
+
+      await userEvent.click(screen.getByRole('button', {name: 'bar'}));
+      await screen.findByRole('option', {name: SORTED_METRIC_NAMES[0]!});
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.click(document.body);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+      });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
     it('closes after selecting an option and calls onChange', async () => {
       const onChange = jest.fn();
       render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={onChange} />, {
@@ -262,11 +281,34 @@ describe('MetricSelector', () => {
       expect(onChange).toHaveBeenCalledTimes(1);
     });
 
-    // NOTE: Tests for ArrowDown moving DOM focus from the search input into
-    // the list were removed because React Aria's FocusScope `contain` prevents
-    // `.focus()` from moving DOM focus to list items in JSDOM. The underlying
-    // selection behaviour is still covered by 'ArrowDown followed by Enter
-    // selects an option'.
+    it('ArrowDown from search keeps focus in input', async () => {
+      render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={jest.fn()} />, {
+        organization,
+      });
+      await userEvent.click(screen.getByRole('button', {name: 'bar'}));
+      const searchInput = await screen.findByPlaceholderText('Search metrics\u2026');
+      await userEvent.keyboard('{ArrowDown}');
+
+      // DOM focus stays on search input; virtual focus moves to first option
+      expect(searchInput).toHaveFocus();
+    });
+
+    it('ArrowDown twice selects second option with Enter', async () => {
+      const onChange = jest.fn();
+      render(<MetricSelector traceMetric={DEFAULT_TRACE_METRIC} onChange={onChange} />, {
+        organization,
+      });
+
+      await userEvent.click(screen.getByRole('button', {name: 'bar'}));
+      await screen.findByRole('option', {name: SORTED_METRIC_NAMES[0]!});
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({name: SORTED_METRIC_NAMES[1]})
+      );
+    });
 
     it('keeps keyboard selection valid when displayed options shrink', async () => {
       const onChange = jest.fn();