Function MultiSearchableSelect

frontend/src/react/components/ExprEditor.tsx:436–635

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

// ============================================================

function MultiSearchableSelect({
  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 [searchOptions, setSearchOptions] = useState<SearchableSelectOption[]>(
    []
  );
  const [loading, setLoading] = useState(false);
  const triggerRef = useRef<HTMLDivElement>(null);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const [knownOptions, setKnownOptions] = useState<SearchableSelectOption[]>(
    []
  );

  const allOptions = useMemo(() => {
    if (optionConfig.search) {
      const merged = new Map<string, SearchableSelectOption>();
      for (const o of knownOptions) merged.set(o.value, o);
      for (const o of searchOptions) merged.set(o.value, o);
      return Array.from(merged.values());
    }
    return optionConfig.options as SearchableSelectOption[];
  }, [optionConfig, knownOptions, searchOptions]);

  const getLabelForValue = useCallback(
    (v: string) => {
      const found = allOptions.find((o) => o.value === v);
      if (found) return found.label;
      if (optionConfig.fallback) return optionConfig.fallback(v)?.label ?? v;
      return v;
    },
    [allOptions, optionConfig]
  );

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