From 4c5d8ce6efc12576ffb286e4270cd08631913952 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=B7=BB?= <657454579@qq.com>
Date: Wed, 31 Jan 2024 10:40:05 +0800
Subject: [PATCH] fix(components): [select] el-option-group error when
 el-option in a component (#15703)

* fix(components): [select] el-option-group error when el-option in a comp

* test(components): [select] add a test
---
 .../select/__tests__/select.test.ts           | 65 ++++++++++++++++++-
 .../components/select/src/option-group.vue    |  2 +
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index 59ef6ef386..238b7bd396 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { markRaw, nextTick } from 'vue'
+import { defineComponent, markRaw, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'
 import { EVENT_CODE } from '@element-plus/constants'
@@ -1878,6 +1878,69 @@ describe('Select', () => {
     expect(vm.value).toBe('Shanghai')
   })
 
+  test('el-option-group should visible when el-option in a component', async () => {
+    const Options = defineComponent({
+      components: {
+        'el-option': Option,
+      },
+      props: {
+        options: {
+          type: Array,
+          default: () => [],
+        },
+      },
+      template: `
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      `,
+    })
+
+    wrapper = mount({
+      template: `
+        <el-select v-model="value">
+          <el-option-group
+            v-for="group in options"
+            :key="group.label"
+            :label="group.label"
+          >
+            <Options :options="group.options" />
+          </el-option-group>
+        </el-select>
+      `,
+      components: {
+        'el-select': Select,
+        'el-option-group': Group,
+        Options,
+      },
+      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(
       `
diff --git a/packages/components/select/src/option-group.vue b/packages/components/select/src/option-group.vue
index 10b07fc032..d7b3a71eb5 100644
--- a/packages/components/select/src/option-group.vue
+++ b/packages/components/select/src/option-group.vue
@@ -71,6 +71,8 @@ export default defineComponent({
             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))
           }
         })
       }