function SelectMultipleInput()

in export-templates/target-identification/src/common/select/index.tsx [303:415]
113 lines of code
14 McCabe index (conditional complexity)

function SelectMultipleInput<Item>(props: SelectInputProps<Item>) {
  const {
    className,
    style,
    children,
    values,
    filter,
    open,
    onClick,
    onBlur,
    onRemove,
    onRemoveAll,
    onChangeFilter,
    onEnter,
    onDownKey,
    onUpKey,
  } = props;
  const input = useRef<HTMLInputElement | null>(null);
  useEffect(() => {
    if (input.current && open) {
      input.current.focus();
    } else if (input.current) {
      input.current.blur();
    }
  }, [input, open]);
  const displayValues = useMemo(() => values
    .map((v) => getSelectOptionProps(children, v))
    .filter(Boolean)
    .map((props, id) => (
      <div key={`display-value-${id}`} className="bg-slate-200 px-1 rounded inline-flex items-center mr-1 my-1 md-1">
        {props.children}
        <XMarkIcon
          className="w-3 h-3 ml-1 cursor-pointer"
          onClick={() => onRemove(props.value)}
        />
      </div>
    )), [children, values, onRemove]);
  const onKey = useCallback((event: KeyboardEvent) => {
    switch ((event.key ?? '').toLowerCase()) {
      case 'backspace':
        if (filter.length === 0 && values.length > 0) {
          onRemove(values[values.length - 1]);
        }
        break;
      case 'escape':
        (event.target as HTMLInputElement).blur();
        break;
      case 'enter':
        onEnter();
        break;
      case 'arrowup':
        if (typeof onUpKey === 'function') {
          onUpKey();
        }
        break;
      case 'arrowdown':
        if (typeof onDownKey === 'function') {
          onDownKey();
        }
        break;
      default:
        break;
    }
  }, [
    onBlur,
    onRemove,
    onEnter,
    onDownKey,
    onUpKey,
    values,
    filter
  ]);
  const onInputChange = useCallback((event: TargetedEvent<HTMLInputElement, Event>) => {
    onChangeFilter((event.target as HTMLInputElement).value);
  }, [onChangeFilter]);
  return (
    <div className={classNames('flex items-center justify-start', className)} style={style}>
      <div className="flex flex-1 flex-wrap items-center justify-start px-1">
        {displayValues}
        <div className="flex-1 z-10 basis-1/2">
          <input
            className="w-full outline-0 border-0 h-6 px-1 bg-transparent"
            ref={input}
            onClick={onClick}
            onBlur={onBlur}
            onKeyDown={onKey}
            value={filter}
            onChange={onInputChange}
            style={{minWidth: '50%'}}
          />
        </div>
      </div>
      {
        values.length > 0 && (
          <XMarkIcon
            className={classNames(
              'ml-1',
              'w-4',
              'h-4',
              'z-10',
              'cursor-pointer',
            )}
            onClick={onRemoveAll}
          />
        )
      }
      <ChevronDownIcon className={classNames('mx-1', 'w-3', 'h-3', 'transition-transform', {
        'rotate-180': open,
        transform: open,
      })} />
    </div>
  );
}