fix(components): [select] iOS keyboard not appear when focus (#11498)

* fix(components): [select] ios keyboard not appear when focus

packages/components/select/src/select.vue

@@ -173,6 +173,18 @@
               @input="debouncedQueryChange"
             />
           </div>
+          <!-- fix: https://github.com/element-plus/element-plus/issues/11415 -->
+          <input
+            v-if="isIOS && !multiple && filterable && readonly"
+            ref="iOSInput"
+            :class="[
+              nsSelect.e('input'),
+              nsSelect.is(selectSize),
+              nsSelect.em('input', 'iOS'),
+            ]"
+            :disabled="selectDisabled"
+            type="text"
+          />
           <el-input
             :id="id"
             ref="reference"
@@ -283,7 +295,7 @@ import {
   toRefs,
   unref,
 } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { isIOS, useResizeObserver } from '@vueuse/core'
 import { placements } from '@popperjs/core'
 import { ClickOutside } from '@element-plus/directives'
 import { useFocus, useLocale, useNamespace } from '@element-plus/hooks'
@@ -482,6 +494,7 @@ export default defineComponent({
 
       reference,
       input,
+      iOSInput,
       tooltipRef,
       tags,
       selectWrapper,
@@ -610,6 +623,7 @@ export default defineComponent({
     }
 
     return {
+      isIOS,
       onOptionsRendered,
       tagInMultiLine,
       prefixWidth,
@@ -666,6 +680,7 @@ export default defineComponent({
 
       reference,
       input,
+      iOSInput,
       tooltipRef,
       popperPaneRef,
       tags,

packages/components/select/src/useSelect.ts

@@ -87,6 +87,7 @@ export const useSelect = (props, states: States, ctx) => {
     input: HTMLInputElement
   }> | null>(null)
   const input = ref<HTMLInputElement | null>(null)
+  const iOSInput = ref<HTMLInputElement | null>(null)
   const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)
   const tags = ref<HTMLElement | null>(null)
   const selectWrapper = ref<HTMLElement | null>(null)
@@ -303,6 +304,7 @@ export const useSelect = (props, states: States, ctx) => {
         if (props.filterable) {
           states.filteredOptionsCount = states.optionsCount
           states.query = props.remote ? '' : states.selectedLabel
+          iOSInput.value?.focus?.()
           if (props.multiple) {
             input.value?.focus()
           } else {
@@ -790,6 +792,7 @@ export const useSelect = (props, states: States, ctx) => {
   const blur = () => {
     states.visible = false
     reference.value?.blur()
+    iOSInput.value?.blur?.()
   }
 
   const handleBlur = (event: FocusEvent) => {
@@ -954,6 +957,7 @@ export const useSelect = (props, states: States, ctx) => {
     // DOM ref
     reference,
     input,
+    iOSInput,
     tooltipRef,
     tags,
     selectWrapper,

packages/theme-chalk/src/select.scss

@@ -175,6 +175,13 @@
     height: 28px;
     background-color: transparent;
 
+    &--iOS {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 6;
+    }
+
     @include when(small) {
       height: 14px;
     }