fix(components): [select] console warning (#11868)

* fix(components): [select] console warning

* Move rendering related logic into render functions.

* chore: fix warnings

* fix: keyboard navigation issue

packages/components/select/src/options.ts

@@ -0,0 +1,29 @@
+import { defineComponent } from 'vue'
+
+import type { Component, VNode } from 'vue'
+
+export default defineComponent({
+  name: 'ElOptions',
+  emits: ['update-options'],
+  setup(_, { slots, emit }) {
+    return () => {
+      const children = slots.default?.()!
+
+      if (children.length) {
+        const options = (children![0]?.children as VNode[])?.[0]?.children || []
+        if (options && options.length) {
+          const filteredOptions = (options as VNode[])
+            .filter(
+              (item: VNode) =>
+                ((item?.type || {}) as Component)?.name === 'ElOption'
+            )
+            .map((item: VNode) => item.props?.label)
+
+          emit('update-options', filteredOptions)
+        }
+      }
+
+      return children
+    }
+  },
+})

packages/components/select/src/select.vue

@@ -247,7 +247,9 @@
             ]"
           >
             <el-option v-if="showNewOption" :value="query" :created="true" />
-            <slot />
+            <el-options @update-options="onOptionsRendered">
+              <slot />
+            </el-options>
           </el-scrollbar>
           <template
             v-if="
@@ -296,6 +298,7 @@ import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
 import { useSelect, useSelectStates } from './useSelect'
 import { selectKey } from './token'
+import ElOptions from './options'
 
 import type { PropType } from 'vue'
 import type { ComponentSize } from '@element-plus/constants'
@@ -309,6 +312,7 @@ export default defineComponent({
     ElInput,
     ElSelectMenu,
     ElOption,
+    ElOptions,
     ElTag,
     ElScrollbar,
     ElTooltip,
@@ -429,6 +433,7 @@ export default defineComponent({
     const { t } = useLocale()
     const states = useSelectStates(props)
     const {
+      optionList,
       optionsArray,
       selectSize,
       readonly,
@@ -591,7 +596,12 @@ export default defineComponent({
       return tooltipRef.value?.popperRef?.contentRef
     })
 
+    const onOptionsRendered = (v) => {
+      optionList.value = v
+    }
+
     return {
+      onOptionsRendered,
       tagInMultiLine,
       prefixWidth,
       selectSize,

packages/components/select/src/useSelect.ts

@@ -1,9 +1,7 @@
 // @ts-nocheck
 import {
   computed,
-  getCurrentInstance,
   nextTick,
-  onUpdated,
   reactive,
   ref,
   shallowRef,
@@ -98,20 +96,9 @@ export const useSelect = (props, states: States, ctx) => {
   const hoverOption = ref(-1)
   const queryChange = shallowRef<QueryChangeCtx>({ query: '' })
   const groupQueryChange = shallowRef('')
-  const instance = getCurrentInstance()
   const optionList = ref<string[]>([])
   let originClientHeight = 0
 
-  onUpdated(() => {
-    const childrens = instance?.slots.default?.()[0].children
-    if (childrens && childrens.length) {
-      const options = childrens
-        .filter((item) => item.type.name === 'ElOption')
-        .map((item) => item.props.label)
-      optionList.value = options
-    }
-  })
-
   const { form, formItem } = useFormItem()
 
   const readonly = computed(
@@ -913,6 +900,7 @@ export const useSelect = (props, states: States, ctx) => {
   }
 
   return {
+    optionList,
     optionsArray,
     selectSize,
     handleResize,