Function SelectSelector

src/Selector/MultipleSelector.tsx:41–258

(props)

};

const SelectSelector: React.FC<SelectorProps> = (props) => {
  const {
    id,
    prefixCls,

    values,
    open,
    searchValue,
    autoClearSearchValue,
    inputRef,
    placeholder,
    disabled,
    mode,
    showSearch,
    autoFocus,
    autoComplete,
    activeDescendantId,
    tabIndex,

    removeIcon,

    maxTagCount,
    maxTagTextLength,
    maxTagPlaceholder = (omittedValues: DisplayValueType[]) => `+ ${omittedValues.length} ...`,
    tagRender,
    onToggleOpen,

    onRemove,
    onInputChange,
    onInputPaste,
    onInputKeyDown,
    onInputMouseDown,
    onInputCompositionStart,
    onInputCompositionEnd,
    onInputBlur,
  } = props;

  const measureRef = React.useRef<HTMLSpanElement>(null);
  const [inputWidth, setInputWidth] = useState(0);
  const [focused, setFocused] = useState(false);

  const selectionPrefixCls = `${prefixCls}-selection`;

  // ===================== Search ======================
  const inputValue =
    open || (mode === 'multiple' && autoClearSearchValue === false) || mode === 'tags'
      ? searchValue
      : '';
  const inputEditable: boolean =
    mode === 'tags' ||
    (mode === 'multiple' && autoClearSearchValue === false) ||
    (showSearch && (open || focused));

  // We measure width and set to the input immediately
  useLayoutEffect(() => {
    setInputWidth(measureRef.current.scrollWidth);
  }, [inputValue]);