Function SearchableSelect

frontend/src/react/components/ExprEditor.tsx:259–430

({
  value,
  optionConfig,
  disabled,
  placeholder,
  onChange,
}: {
  value: string;
  optionConfig: OptionConfig;
  disabled?: boolean;
  placeholder?: string;
  onChange: (value: string) => void;
})

}

function SearchableSelect({
  value,
  optionConfig,
  disabled,
  placeholder,
  onChange,
}: {
  value: string;
  optionConfig: OptionConfig;
  disabled?: boolean;
  placeholder?: string;
  onChange: (value: string) => void;
}) {
  const { t } = useTranslation();
  const [search, setSearch] = useState("");
  const [open, setOpen] = useState(false);
  const [options, setOptions] = useState<SearchableSelectOption[]>([]);
  const [loading, setLoading] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const selectedLabel = useMemo(() => {
    const found = options.find((o) => o.value === value);
    if (found) return found.label;
    if (optionConfig.fallback)
      return optionConfig.fallback(value)?.label ?? value;
    return value || "";
  }, [options, value, optionConfig]);

  const doSearch = useCallback(
    async (q: string) => {
      if (!optionConfig.search) return;
      setLoading(true);
      try {
        const resp = await optionConfig.search({
          search: q,
          pageToken: "",
          pageSize: getDefaultPagination(),
        });
        setOptions(resp.options as SearchableSelectOption[]);
      } finally {
        setLoading(false);
      }
    },
    [optionConfig]
  );

  const initializedRef = useRef(false);
  useEffect(() => {
    if (initializedRef.current) return;
    initializedRef.current = true;
    if (!value) return;
    if (optionConfig.fetch) {
      optionConfig.fetch([value]).then((opts) => {
        setOptions(opts as SearchableSelectOption[]);
      });
    } else if (optionConfig.search) {