Function Autocomplete

packages/shared/src/components/fields/Autocomplete.tsx:26–163

({
  name,
  isLoading,
  options,
  label,
  onChange,
  onSelect,
  onBlur: onBlurProp,
  selectedValue,
  defaultValue,
  resetOnBlur = true,
  ...restProps
}: AutocompleteProps)

}

const Autocomplete = ({
  name,
  isLoading,
  options,
  label,
  onChange,
  onSelect,
  onBlur: onBlurProp,
  selectedValue,
  defaultValue,
  resetOnBlur = true,
  ...restProps
}: AutocompleteProps) => {
  const [input, setInput] = useState(defaultValue || '');
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [selectedOption, setSelectedOption] = useState(undefined);

  /* 
   To prevent flickering of the selected option image as the user types.
   We want to set the selected option only when the selected value changes or the user clears the selected value.
  */
  useEffect(() => {
    if (!selectedValue) {
      setSelectedOption(undefined);
      return;
    }
    if (selectedOption?.value !== selectedValue) {
      setSelectedOption(options.find((opt) => opt.value === selectedValue));
    }
  }, [selectedValue, options, selectedOption]);

  const handleChange = (val: string) => {
    setInput(val);
    onChange(val);
  };

  const handleSelect = (opt: AutocompleteOption) => {
    setInput(opt.label);
    onSelect(opt.value);
    setIsFocused(false);
    inputRef.current?.focus();
  };
  const handleBlur = () => {
    setIsFocused(false);
    if (resetOnBlur) {
      setInput(options.find((opt) => opt.value === selectedValue)?.label || '');
    }
    onBlurProp?.();
  };

  const isSecondaryField = restProps.fieldType === 'secondary';

  return (
    <div className="flex flex-col gap-2">
      {!isSecondaryField && (
        <Typography type={TypographyType.Callout} bold>
          {label}