perf(query-builder): Do not render filter value suggestions when they're not open (#103691)

This is an optimization for the `SearchQueryBuilder` component. Here's
the issue I'm seeing:

- `SearchQueryBuilder` is rendered (or re-rendered, whichever) with
unstable props (because the props are hard to stabilize, which happens
sometimes, or why rendering for the first time)
- The render is fairly slow, it can take anywhere in the 50-100ms time
range
- One of the slower parts is rendering `SearchQueryBuilderComboBox`.
This takes a long time to render because it uses React Stately's
`useComboBoxState`. This hook accepts the `children` props, which is the
collection _renderer_. It _renders all the items_ at this point, even if
the combo box is not open!

So, the entire collection is _rendered_ even if it's not open. This PR
does a trick in which if we know the combo box is not open, it provides
a `null` children, so the extra work doesn't have to be done. This saves
~30ms per free text token in the builder, which can be a _lot_, if there
are many tokens, since there's free text around each one.

As far as I can tell, this doesn't cause any adverse effects on the UI.

**Before:**
<img width="1031" height="363" alt="Screenshot 2025-11-19 at 4 50 55 PM"
src="https://github.com/user-attachments/assets/b3954e66-8527-458c-960f-a9838f7b30bc"
/>

**After:**
<img width="452" height="186" alt="Screenshot 2025-11-19 at 4 56 02 PM"
src="https://github.com/user-attachments/assets/15436d5d-e384-4f9f-a4bc-06be670dad57"
/>

Author: gggritso

static/app/components/searchQueryBuilder/tokens/freeText.tsx

@@ -41,6 +41,8 @@ import {FieldKind, FieldValueType} from 'sentry/utils/fields';
 import {isCtrlKeyPressed} from 'sentry/utils/isCtrlKeyPressed';
 import useOrganization from 'sentry/utils/useOrganization';
 
+import type {FilterKeyItem} from './filterKeyListBox/types';
+
 type SearchQueryBuilderInputProps = {
   item: Node<ParseResultToken>;
   state: ListState<ParseResultToken>;
@@ -409,6 +411,24 @@ function SearchQueryBuilderInputInternal({
     updateSelectionIndex();
   }, [updateSelectionIndex]);
 
+  const renderItem = useCallback(
+    (keyItem: FilterKeyItem) =>
+      itemIsSection(keyItem) ? (
+        <Section title={keyItem.label} key={keyItem.key}>
+          {keyItem.options.map(child => (
+            <Item {...child} key={child.key}>
+              {child.label}
+            </Item>
+          ))}
+        </Section>
+      ) : (
+        <Item {...keyItem} key={keyItem.key}>
+          {keyItem.label}
+        </Item>
+      ),
+    []
+  );
+
   return (
     <Fragment>
       <HiddenText
@@ -690,21 +710,12 @@ function SearchQueryBuilderInputInternal({
           state.collection.getLastKey() === item.key ? 'query-builder-input' : undefined
         }
       >
-        {keyItem =>
-          itemIsSection(keyItem) ? (
-            <Section title={keyItem.label} key={keyItem.key}>
-              {keyItem.options.map(child => (
-                <Item {...child} key={child.key}>
-                  {child.label}
-                </Item>
-              ))}
-            </Section>
-          ) : (
-            <Item {...keyItem} key={keyItem.key}>
-              {keyItem.label}
-            </Item>
-          )
-        }
+        {/* `useComboBoxState` inside the combo box component eagerly iterates
+        `children`, which can be very slow if there are many items. If the combo
+        box is not even open, do not pass any `children`. This prevents the
+        combo box from iterating anything while it's closed, which improves
+        render performance when the combo box is closed. */}
+        {isOpen ? renderItem : null}
       </SearchQueryBuilderCombobox>
     </Fragment>
   );