fix: tagRender should work on max tag (#1044)

* fix: tagRender should work on max tag

* chore: update @type/jest

* chore: fix lint and tsc errors

Author: afc163

docs/examples/filterSort.tsx

@@ -22,7 +22,7 @@ const Test = () => (
       filterSort={sorterByLabel}
       optionFilterProp="label"
       options={incidencesStateResource}
-    ></Select>
+     />
     <h3> without filter sort </h3>
     <Select
       showSearch

package.json

@@ -55,9 +55,9 @@
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^1.0.2",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.0.0",
-    "@types/jest": "^26.0.24",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "babel-jest": "^29.6.1",

src/BaseSelect.tsx

@@ -67,6 +67,7 @@ export type CustomTagProps = {
   disabled: boolean;
   onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   closable: boolean;
+  isMaxTag: boolean;
 };
 
 export interface BaseSelectRef {

src/Selector/MultipleSelector.tsx

@@ -128,16 +128,17 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
     value: RawValueType,
     content: React.ReactNode,
     itemDisabled: boolean,
-    closable: boolean,
-    onClose: React.MouseEventHandler,
+    closable?: boolean,
+    onClose?: React.MouseEventHandler,
+    isMaxTag?: boolean,
   ) => {
     const onMouseDown = (e: React.MouseEvent) => {
       onPreventMouseDown(e);
       onToggleOpen(!open);
     };
     return (
       <span onMouseDown={onMouseDown}>
-        {tagRender({ label: content, value, disabled: itemDisabled, closable, onClose })}
+        {tagRender({ label: content, value, disabled: itemDisabled, closable, onClose, isMaxTag: !!isMaxTag })}
       </span>
     );
   };
@@ -174,8 +175,9 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
       typeof maxTagPlaceholder === 'function'
         ? maxTagPlaceholder(omittedValues)
         : maxTagPlaceholder;
-
-    return defaultRenderSelector({ title: content }, content, false);
+    return typeof tagRender === 'function'
+      ? customizeRenderSelector(undefined, content, false, false, undefined, true)
+      : defaultRenderSelector({ title: content }, content, false);
   };
 
   // >>> Input Node

tests/BaseSelect.test.tsx

@@ -1,6 +1,6 @@
 import type { OptionListProps, RefOptionListProps } from '@/OptionList';
-import { act, fireEvent, render } from '@testing-library/react';
-import { forwardRef } from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { forwardRef, act } from 'react';
 import BaseSelect from '../src/BaseSelect';
 
 const OptionList = forwardRef<RefOptionListProps, OptionListProps>(() => (

tests/Combobox.test.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable max-classes-per-file */
 
 import '@testing-library/jest-dom';
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import { resetWarned } from 'rc-util/lib/warning';
-import React from 'react';
+import React, { act } from 'react';
 import type { SelectProps } from '../src';
 import Select, { Option } from '../src';
 import allowClearTest from './shared/allowClearTest';

tests/Field.test.tsx

@@ -1,5 +1,4 @@
-import { act } from 'react-dom/test-utils';
-import * as React from 'react';
+import React, { act } from 'react';
 import Select from '../src';
 import type { SelectProps } from '../src';
 import { injectRunAllTimers } from './utils/common';

tests/Multiple.test.tsx

@@ -4,7 +4,7 @@ import Select, { Option, OptGroup } from '../src';
 import focusTest from './shared/focusTest';
 import blurTest from './shared/blurTest';
 import hoverTest from './shared/hoverTest';
-import renderTest from './shared/renderTest';
+import maxTagRenderTest from './shared/maxTagRenderTest';
 import removeSelectedTest from './shared/removeSelectedTest';
 import dynamicChildrenTest from './shared/dynamicChildrenTest';
 import inputFilterTest from './shared/inputFilterTest';
@@ -27,7 +27,7 @@ describe('Select.Multiple', () => {
   focusTest('multiple');
   blurTest('multiple');
   hoverTest('multiple');
-  renderTest('multiple');
+  maxTagRenderTest('multiple');
   removeSelectedTest('multiple');
   dynamicChildrenTest('multiple');
   inputFilterTest('multiple');

tests/OptionList.test.tsx

@@ -1,6 +1,5 @@
 import KeyCode from 'rc-util/lib/KeyCode';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import { BaseSelectContext } from '../src/hooks/useBaseProps';
 import type { RefOptionListProps } from '../src/OptionList';
 import OptionList from '../src/OptionList';

tests/Select.test.tsx

@@ -4,8 +4,7 @@ import KeyCode from 'rc-util/lib/KeyCode';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { resetWarned } from 'rc-util/lib/warning';
 import type { ScrollConfig } from 'rc-virtual-list/lib/List';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { act } from 'react';
 import type { SelectProps } from '../src';
 import Select, { OptGroup, Option, useBaseProps } from '../src';
 import type { BaseSelectRef } from '../src/BaseSelect';