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';

tests/Tags.test.tsx

@@ -11,7 +11,7 @@ import hoverTest from './shared/hoverTest';
 import inputFilterTest from './shared/inputFilterTest';
 import openControlledTest from './shared/openControlledTest';
 import removeSelectedTest from './shared/removeSelectedTest';
-import renderTest from './shared/renderTest';
+import maxTagRenderTest from './shared/maxTagRenderTest';
 import throwOptionValue from './shared/throwOptionValue';
 import { injectRunAllTimers, findSelection, expectOpen, toggleOpen, keyDown } from './utils/common';
 
@@ -22,7 +22,7 @@ describe('Select.Tags', () => {
   focusTest('tags', {});
   blurTest('tags');
   hoverTest('tags');
-  renderTest('tags');
+  maxTagRenderTest('tags');
   removeSelectedTest('tags');
   throwOptionValue('tags');
   dynamicChildrenTest('tags', {});

tests/__snapshots__/Multiple.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not reach 1`] = `
+exports[`Select.Multiple max tag render not display maxTagPlaceholder if maxTagCount not reach 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >
@@ -50,7 +50,7 @@ exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not
 </div>
 `;
 
-exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPlaceholder 1`] = `
+exports[`Select.Multiple max tag render truncates tags by maxTagCount and show maxTagPlaceholder 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >
@@ -167,7 +167,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
 </div>
 `;
 
-exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPlaceholder function 1`] = `
+exports[`Select.Multiple max tag render truncates tags by maxTagCount and show maxTagPlaceholder function 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >
@@ -285,7 +285,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
 </div>
 `;
 
-exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
+exports[`Select.Multiple max tag render truncates values by maxTagTextLength 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >

tests/__snapshots__/Tags.test.tsx.snap

@@ -228,7 +228,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
 </div>
 `;
 
-exports[`Select.Tags render not display maxTagPlaceholder if maxTagCount not reach 1`] = `
+exports[`Select.Tags max tag render not display maxTagPlaceholder if maxTagCount not reach 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >
@@ -275,7 +275,7 @@ exports[`Select.Tags render not display maxTagPlaceholder if maxTagCount not rea
 </div>
 `;
 
-exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceholder 1`] = `
+exports[`Select.Tags max tag render truncates tags by maxTagCount and show maxTagPlaceholder 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >
@@ -389,7 +389,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
 </div>
 `;
 
-exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceholder function 1`] = `
+exports[`Select.Tags max tag render truncates tags by maxTagCount and show maxTagPlaceholder function 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >
@@ -504,7 +504,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
 </div>
 `;
 
-exports[`Select.Tags render truncates values by maxTagTextLength 1`] = `
+exports[`Select.Tags max tag render truncates values by maxTagTextLength 1`] = `
 <div
   class="rc-select rc-select-multiple rc-select-show-search"
 >

tests/focus.test.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import { act } from 'react-dom/test-utils';
+import React, { useState, act } from 'react';
 import Select from '../src';
 import { fireEvent, render } from '@testing-library/react';
 

tests/shared/renderTest.tsx renamed to tests/shared/maxTagRenderTest.tsx

@@ -5,7 +5,7 @@ import { findSelection } from '../utils/common';
 import { render } from '@testing-library/react';
 
 export default function maxTagTextLengthTest(mode: any) {
-  describe('render', () => {
+  describe('max tag render', () => {
     it('truncates values by maxTagTextLength', () => {
       const { container } = render(
         <Select mode={mode} value={['one', 'two']} maxTagTextLength={2}>
@@ -90,5 +90,37 @@ export default function maxTagTextLengthTest(mode: any) {
 
       expect(container.firstChild).toMatchSnapshot();
     });
+
+    it('tagRender should work on maxTagPlaceholder', () => {
+      const tagRender = jest.fn();
+      const maxTagPlaceholder = (omittedValues) => (
+        `${omittedValues.length} values omitted`
+      );
+      render(
+        <Select
+          mode={mode}
+          value={['one', 'two', 'three']}
+          maxTagCount={2}
+          tagRender={tagRender}
+          maxTagPlaceholder={maxTagPlaceholder}
+        >
+          <Option value="one">One</Option>
+          <Option value="two">Two</Option>
+          <Option value="three">Three</Option>
+        </Select>,
+      );
+      expect(tagRender).toHaveBeenCalledWith(expect.objectContaining({
+        isMaxTag: false,
+        label: 'One',
+      }));
+      expect(tagRender).toHaveBeenCalledWith(expect.objectContaining({
+        isMaxTag: false,
+        label: 'Two',
+      }));
+      expect(tagRender).toHaveBeenCalledWith(expect.objectContaining({
+        isMaxTag: true,
+        label: '1 values omitted',
+      }));
+    });
   });
 }

tests/utils/common.ts

@@ -1,5 +1,5 @@
+import { act } from 'react';
 import { createEvent, fireEvent } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 
 export function expectOpen(wrapper: any, open: boolean = true) {
   if (wrapper instanceof HTMLElement) {
@@ -86,7 +86,7 @@ export function injectRunAllTimers(jest: Jest) {
     originRunAllTimers = jest.runAllTimers;
 
     jest.runAllTimers = () => {
-      let result: typeof jest;
+      let result;
       act(() => {
         result = originRunAllTimers();
       });