fix: Select support maxCount

docs/examples/auto-tokenization.tsx

@@ -7,6 +7,7 @@ const Demo: React.FC = () => (
     <h2>自动分词</h2>
     <Select
       mode="tags"
+      maxCount={3}
       style={{ width: '100%' }}
       tokenSeparators={[',']}
       options={Array.from({ length: 20 }, (_, i) => ({ label: i.toString(), value: i.toString() }))}

src/BaseSelect.tsx

@@ -28,6 +28,7 @@ import type { RefTriggerProps } from './SelectTrigger';
 import SelectTrigger from './SelectTrigger';
 import TransBtn from './TransBtn';
 import { getSeparatedContent } from './utils/valueUtil';
+import useMaxCount from './hooks/useMaxCount';
 
 export type {
   DisplayInfoType,
@@ -394,12 +395,21 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     [tokenSeparators],
   );
 
+  const { truncateLength, shouldTruncate } = useMaxCount(multiple);
+
   const onInternalSearch = (searchText: string, fromTyping: boolean, isCompositing: boolean) => {
+    if (shouldTruncate()) {
+      return;
+    }
     let ret = true;
     let newSearchText = searchText;
     onActiveValueChange?.(null);
 
-    const separatedList = getSeparatedContent(searchText, tokenSeparators);
+    const separatedList = getSeparatedContent(
+      searchText,
+      tokenSeparators,
+      shouldTruncate(false) ? truncateLength : undefined,
+    );
 
     // Check if match the `tokenSeparators`
     const patchLabels: string[] = isCompositing ? null : separatedList;

src/OptionList.tsx

@@ -14,6 +14,7 @@ import TransBtn from './TransBtn';
 import useBaseProps from './hooks/useBaseProps';
 import type { FlattenOptionData } from './interface';
 import { isPlatformMac } from './utils/platformUtil';
+import useMaxCount from './hooks/useMaxCount';
 
 // export interface OptionListProps<OptionsType extends object[]> {
 export type OptionListProps = Record<string, never>;
@@ -45,7 +46,6 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     onPopupScroll,
   } = useBaseProps();
   const {
-    maxCount,
     flattenOptions,
     onActiveValue,
     defaultActiveFirstOption,
@@ -71,10 +71,9 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
   // =========================== List ===========================
   const listRef = React.useRef<ListRef>(null);
 
-  const overMaxCount = React.useMemo<boolean>(
-    () => multiple && typeof maxCount !== 'undefined' && rawValues?.size >= maxCount,
-    [multiple, maxCount, rawValues?.size],
-  );
+  const { shouldTruncate } = useMaxCount(multiple);
+
+  const overMaxCount = shouldTruncate();
 
   const onListMouseDown: React.MouseEventHandler<HTMLDivElement> = (event) => {
     event.preventDefault();

src/hooks/useMaxCount.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import SelectContext from '../SelectContext';
+import type { SelectContextProps } from '../SelectContext';
+
+const useMaxCount = (multiple: boolean) => {
+  const { maxCount, rawValues } = React.useContext<SelectContextProps>(SelectContext) || {};
+  const truncateLength = React.useMemo<number>(
+    () => maxCount - rawValues?.size,
+    [maxCount, rawValues?.size],
+  );
+  const shouldTruncate = React.useCallback(
+    (overCount = true) => {
+      if (!multiple || typeof maxCount === 'undefined') {
+        return false;
+      }
+      return overCount ? truncateLength <= 0 : truncateLength > 0;
+    },
+    [multiple, maxCount, truncateLength],
+  );
+  return { truncateLength, shouldTruncate };
+};
+
+export default useMaxCount;

src/utils/valueUtil.ts

@@ -111,7 +111,7 @@ export function injectPropsWithOption<T extends object>(option: T): T {
   return newOption;
 }
 
-export const getSeparatedContent = (text: string, tokens: string[]): string[] => {
+export const getSeparatedContent = (text: string, tokens: string[], end?: number): string[] => {
   if (!tokens || !tokens.length) {
     return null;
   }
@@ -127,5 +127,9 @@ export const getSeparatedContent = (text: string, tokens: string[]): string[] =>
       .filter(Boolean);
   };
   const list = separate(text, tokens);
-  return match ? list : null;
+  if (match) {
+    return typeof end !== 'undefined' ? list.slice(0, end) : list;
+  } else {
+    return null;
+  }
 };

tests/Tags.test.tsx

@@ -1,5 +1,5 @@
 import { mount } from 'enzyme';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import classNames from 'classnames';
 import * as React from 'react';
@@ -505,4 +505,25 @@ describe('Select.Tags', () => {
     expect(wrapper.find('.rc-select-item-option').length).toBe(1);
     expect(errSpy).not.toHaveBeenCalled();
   });
+
+  it(`paste content to split when count >= maxCount`, () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Select
+        mode="tags"
+        maxCount={3}
+        onChange={onChange}
+        tokenSeparators={[',']}
+        value={['1', '2', '3']}
+      />,
+    );
+    const input = container.querySelector<HTMLInputElement>('input');
+    fireEvent.paste(input, {
+      clipboardData: { getData: () => 'test' },
+    });
+    fireEvent.change(input, {
+      target: { value: 'test' },
+    });
+    expect(onChange).not.toBeCalled();
+  });
 });