From 1f89174ddd73edd807d2240ce3a69e18fe831a5e Mon Sep 17 00:00:00 2001
From: zz <2418184580@qq.com>
Date: Fri, 5 Aug 2022 21:00:31 +0800
Subject: [PATCH] fix(components): [select] injected form context may be
 undefined (#8860)

---
 packages/components/select/src/useSelect.ts | 22 ++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 9e2b59af8d..9d14a7ca21 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -1,7 +1,6 @@
 // @ts-nocheck
 import {
   computed,
-  inject,
   nextTick,
   reactive,
   ref,
@@ -23,12 +22,15 @@ import {
   isKorean,
   scrollIntoView,
 } from '@element-plus/utils'
-import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
-import { formContextKey, formItemContextKey } from '@element-plus/tokens'
+import {
+  useFormItem,
+  useLocale,
+  useNamespace,
+  useSize,
+} from '@element-plus/hooks'
 
 import type { ComponentPublicInstance } from 'vue'
 import type ElTooltip from '@element-plus/components/tooltip'
-import type { FormContext, FormItemContext } from '@element-plus/tokens'
 import type { QueryChangeCtx, SelectOptionProxy } from './token'
 
 export function useSelectStates(props) {
@@ -83,15 +85,13 @@ export const useSelect = (props, states: States, ctx) => {
   const queryChange = shallowRef<QueryChangeCtx>({ query: '' })
   const groupQueryChange = shallowRef('')
 
-  // inject
-  const elForm = inject(formContextKey, {} as FormContext)
-  const elFormItem = inject(formItemContextKey, {} as FormItemContext)
+  const { form, formItem } = useFormItem()
 
   const readonly = computed(
     () => !props.filterable || props.multiple || !states.visible
   )
 
-  const selectDisabled = computed(() => props.disabled || elForm.disabled)
+  const selectDisabled = computed(() => props.disabled || form?.disabled)
 
   const showClose = computed(() => {
     const hasValue = props.multiple
@@ -176,7 +176,7 @@ export const useSelect = (props, states: States, ctx) => {
 
   // watch
   watch(
-    [() => selectDisabled.value, () => selectSize.value, () => elForm.size],
+    [() => selectDisabled.value, () => selectSize.value, () => form?.size],
     () => {
       nextTick(() => {
         resetInputHeight()
@@ -211,7 +211,7 @@ export const useSelect = (props, states: States, ctx) => {
         states.inputLength = 20
       }
       if (!isEqual(val, oldVal) && props.validateEvent) {
-        elFormItem.validate?.('change').catch((err) => debugWarn(err))
+        formItem?.validate('change').catch((err) => debugWarn(err))
       }
     },
     {
@@ -338,7 +338,7 @@ export const useSelect = (props, states: States, ctx) => {
       ) as HTMLInputElement
       const _tags = tags.value
 
-      const sizeInMap = getComponentSize(selectSize.value || elForm.size)
+      const sizeInMap = getComponentSize(selectSize.value || form?.size)
       // it's an inner input so reduce it by 2px.
       input.style.height = `${
         (states.selected.length === 0