fix: Select label React Node warning some case (#946)

* fix: Select label React Node warning some case * test: test driven * fix: warning of label when update * chore: clean up * chore: back of raw --------- Co-authored-by: 洋 <hetongyang@bytedance.com> Co-authored-by: 二货机器人 <smith3816@gmail.com>
react-component · Jun 6, 2023 · a5d4b75 · a5d4b75
1 parent 4510b80
commit a5d4b75
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 13 deletions.
diff --git a/src/Select.tsx b/src/Select.tsx
@@ -140,7 +140,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   options?: OptionType[];
   defaultActiveFirstOption?: boolean;
   virtual?: boolean;
-  direction?: "ltr" | "rtl";
+  direction?: 'ltr' | 'rtl';
   listHeight?: number;
   listItemHeight?: number;
 
@@ -275,7 +275,12 @@ const Select = React.forwardRef(
             // Warning if label not same as provided
             if (process.env.NODE_ENV !== 'production' && !optionLabelProp) {
               const optionLabel = option?.[mergedFieldNames.label];
-              if (optionLabel !== undefined && optionLabel !== rawLabel) {
+              if (
+                optionLabel !== undefined &&
+                !React.isValidElement(optionLabel) &&
+                !React.isValidElement(rawLabel) &&
+                optionLabel !== rawLabel
+              ) {
                 warning(false, '`label` of `value` is not same as `label` in Select options.');
               }
             }

diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx
@@ -1477,17 +1477,55 @@ describe('Select.Basic', () => {
     expect(onKeyUp).toHaveBeenCalled();
   });
 
-  it('warning if label not same as option', () => {
-    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(
-      <Select value={{ value: '2', label: 'One' }} labelInValue>
-        <Option value="2">Two</Option>
-      </Select>,
-    );
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: `label` of `value` is not same as `label` in Select options.',
-    );
-    errorSpy.mockRestore();
+  describe('warning if label not same as option', () => {
+    it('should work', () => {
+      resetWarned();
+
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      mount(
+        <Select value={{ value: '2', label: 'One' }} labelInValue>
+          <Option value="2">Two</Option>
+        </Select>,
+      );
+      expect(errorSpy).toHaveBeenCalledWith(
+        'Warning: `label` of `value` is not same as `label` in Select options.',
+      );
+      errorSpy.mockRestore();
+    });
+
+    it('not warning for react node', () => {
+      resetWarned();
+      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      const Demo = () => {
+        const [, setVal] = React.useState(0);
+
+        return (
+          <Select
+            onChange={setVal}
+            defaultValue={0}
+            options={[
+              {
+                value: 0,
+                label: <div />,
+              },
+              {
+                value: 1,
+                label: <div />,
+              },
+            ]}
+          />
+        );
+      };
+
+      const wrapper = mount(<Demo />);
+
+      toggleOpen(wrapper);
+      selectItem(wrapper, 1);
+
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
+    });
   });
 
   describe('warning if use `props` to read data', () => {