fix(components): [select] group error when custom option component (#16621)

* fix(components): [select] group error when custom option component

* Update packages/components/select/src/option-group.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* perf(components): [select] group flattedChildren

* perf(components): [select] group flattedChildren

* test(components): [select] group when custom option component case

---------

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

packages/components/select/__tests__/select.test.ts

@@ -1941,6 +1941,78 @@ describe('Select', () => {
     expect(wrapper.findComponent(Group).vm.visible).toBe(true)
   })
 
+  test('el-option-group should visible when custom option component', async () => {
+    const CustomOptions = defineComponent({
+      components: {
+        'el-option': Option,
+      },
+      props: {
+        label: {
+          type: String,
+          default: '',
+        },
+        value: {
+          type: [String, Number],
+          default: null,
+        },
+      },
+      template: `
+        <el-option
+          :label="label"
+          :value="value"
+        >
+          {{label}} - some extra text
+        </el-option>
+      `,
+    })
+
+    wrapper = mount({
+      template: `
+        <el-select v-model="value">
+          <el-option-group
+            v-for="group in options"
+            :key="group.label"
+            :label="group.label"
+          >
+            <custom-options
+              v-for="item in group.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-option-group>
+        </el-select>
+      `,
+      components: {
+        'el-select': Select,
+        'el-option-group': Group,
+        CustomOptions,
+      },
+      data() {
+        return {
+          value: '',
+          options: [
+            {
+              label: 'Popular cities',
+              options: [
+                {
+                  value: 'Shanghai',
+                  label: 'Shanghai',
+                },
+                {
+                  value: 'Beijing',
+                  label: 'Beijing',
+                },
+              ],
+            },
+          ],
+        }
+      },
+    })
+
+    expect(wrapper.findComponent(Group).vm.visible).toBe(true)
+  })
+
   test('tag of disabled option is not closable', async () => {
     wrapper = _mount(
       `

packages/components/select/src/option-group.vue

@@ -21,8 +21,8 @@ import {
   ref,
   toRefs,
 } from 'vue'
-import { isArray } from '@vue/shared'
 import { useMutationObserver } from '@vueuse/core'
+import { ensureArray } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import { selectGroupKey } from './token'
 
@@ -57,25 +57,24 @@ export default defineComponent({
       children.value.some((option) => option.visible === true)
     )
 
+    const isOption = (node) =>
+      node.type?.name === 'ElOption' && !!node.component?.proxy
+
     // get all instances of options
     const flattedChildren = (node) => {
+      const Nodes = ensureArray(node)
       const children = []
-      if (isArray(node.children)) {
-        node.children.forEach((child) => {
-          if (
-            child.type &&
-            child.type.name === 'ElOption' &&
-            child.component &&
-            child.component.proxy
-          ) {
-            children.push(child.component.proxy)
-          } else if (child.children?.length) {
-            children.push(...flattedChildren(child))
-          } else if (child.component?.subTree) {
-            children.push(...flattedChildren(child.component.subTree))
-          }
-        })
-      }
+
+      Nodes.forEach((child) => {
+        if (isOption(child)) {
+          children.push(child.component.proxy)
+        } else if (child.children?.length) {
+          children.push(...flattedChildren(child.children))
+        } else if (child.component?.subTree) {
+          children.push(...flattedChildren(child.component.subTree))
+        }
+      })
+
       return children
     }