fix rendering exception caused in group select (#997)

* fix: fix rendering exception caused by the group options data being null/undefined. * fix: fix rendering exception caused by the group options data being null/undefined. * feat: pr comment fix --------- Co-authored-by: 影和 <mocha.wyh@digital-engine.com>
react-component · Dec 11, 2023 · 930b6fc · 930b6fc · vercel · Dec 11, 2023
1 parent 026724e
commit 930b6fc
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/docs/examples/optgroup.tsx b/docs/examples/optgroup.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import React from 'react';
-import Select, { Option, OptGroup } from 'rc-select';
+import Select from 'rc-select';
 import '../../assets/index.less';
 
 function onChange(value, option) {
@@ -16,27 +16,23 @@ const Test = () => (
         defaultValue="lucy"
         style={{ width: 500 }}
         onChange={onChange}
-      >
-        <OptGroup label="manager">
-          <Option value="jack" test-prop="jack-prop">
-            <b
-              style={{
-                color: 'red',
-              }}
-            >
-              jack
-            </b>
-          </Option>
-          <Option value="lucy" test-prop="lucy-prop">
-            lucy
-          </Option>
-        </OptGroup>
-        <OptGroup label="engineer">
-          <Option value="yiminghe" test-prop="yiminghe-prop">
-            yiminghe
-          </Option>
-        </OptGroup>
-      </Select>
+        options={[{
+          label: 'manager',
+          options: [
+            { label: 'jack', value: 'jack' },
+            { label: 'lucy', value: 'lucy' }
+          ],
+        }, {
+          label: 'engineer',
+          options: [{ label: 'yiminghe', value: 'yiminghe' }]
+        }, {
+          label: 'bamboo',
+          options: undefined,
+        }, {
+          label: 'mocha',
+          options: null,
+        }]}
+      />
     </div>
   </div>
 );

diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
@@ -51,6 +51,10 @@ export function flattenOptions<OptionType extends BaseOptionType = DefaultOption
   } = fillFieldNames(fieldNames, false);
 
   function dig(list: OptionType[], isGroupOption: boolean) {
+    if (!Array.isArray(list)) {
+      return;
+    }
+
     list.forEach((data) => {
       if (isGroupOption || !(fieldOptions in data)) {
         const value = data[fieldValue];

diff --git a/tests/Group.test.tsx b/tests/Group.test.tsx
@@ -66,4 +66,34 @@ describe('Select.Group', () => {
       expect(wrapper.find('.rc-select-item-group').prop('title')).toBeUndefined();
     });
   });
+
+  it('group options exist undefined/null', () => {
+    const wrapper = mount(
+      <Select
+          open
+          options={[
+            {
+              label: 'zombiej',
+              options: [
+                { label: 'jackson', value: 'jackson' },
+              ],
+            },
+            {
+              label: 'bamboo',
+              options: undefined,
+            },
+            {
+              label: 'mocha',
+              options: null,
+            }
+        ]}
+      />
+    );
+
+    expect(wrapper.find('.rc-select-item-group').length).toEqual(3);
+    expect(wrapper.find('.rc-select-item-option').length).toEqual(1);
+
+    expect(wrapper.find('.rc-select-item').at(2).prop('title')).toEqual('bamboo');
+    expect(wrapper.find('.rc-select-item').at(3).prop('title')).toEqual('mocha');
+  })
 });