export function CustomAsyncSelect()

in src/components/view/SegmentSelect/CustomAsyncSelect.tsx [86:137]
51 lines of code
11 McCabe index (conditional complexity)

export function CustomAsyncSelect(props: CustomAsyncSelectProps) {
  let clickEnter = false;
  const loadOptions = (search: string, loadedOptions: any) => {
    if (search.match(/\$\{\w+/gi) != null) {
      return new Promise((res) => res({ hasMore: false, options: [] }));
    }
    return props.loadOptions(search, loadedOptions);
  };

  return (
    <AsyncPaginate
      className={cx('select', styles)}
      menuIsOpen={true}
      autoFocus={true}
      classNamePrefix="grafana-custom"
      loadOptions={loadOptions}
      onChange={(item: any) => {
        if (props.setExpanded != null) {
          props.setExpanded(false);
        }
        if (clickEnter) {
          clickEnter = false;
          return;
        }
        props.onChange(item);
      }}
      onBlur={(event) => {
        if (props.setExpanded != null) {
          props.setExpanded(false);
        }
        const value = (event.target as any).value;
        if (value == null || value === '') {
          return;
        }
        props.onChange(toOption(value));
      }}
      onKeyDown={(event) => {
        if (event.key === 'Enter') {
          if (props.setExpanded != null) {
            props.setExpanded(false);
          }
          const value = (event.target as any).value;
          clickEnter = true;
          if (value == null || value === '') {
            return;
          }
          props.onChange(toOption(value));
        }
      }}
    />
  );
}