fix(Select): dropdownRender inside dropdown box disappears when the input box gains focus (#7020)

Co-authored-by: undefined <undefined>

Author: selicens

components/select/demo/custom-dropdown-menu.vue

@@ -19,20 +19,22 @@ Customize the dropdown menu via `dropdownRender`.
 <template>
   <a-select
     v-model:value="value"
-    style="width: 120px"
+    placeholder="custom dropdown render"
+    style="width: 300px"
     :options="items.map(item => ({ value: item }))"
   >
     <template #dropdownRender="{ menuNode: menu }">
       <v-nodes :vnodes="menu" />
       <a-divider style="margin: 4px 0" />
-      <div
-        style="padding: 4px 8px; cursor: pointer"
-        @mousedown="e => e.preventDefault()"
-        @click="addItem"
-      >
-        <plus-outlined />
-        Add item
-      </div>
+      <a-space style="padding: 4px 8px">
+        <a-input ref="inputRef" v-model:value="name" placeholder="Please enter item" />
+        <a-button type="text" @click="addItem">
+          <template #icon>
+            <plus-outlined />
+          </template>
+          Add item
+        </a-button>
+      </a-space>
     </template>
   </a-select>
 </template>
@@ -54,10 +56,17 @@ const VNodes = defineComponent({
 
 let index = 0;
 const items = ref(['jack', 'lucy']);
-const value = ref('lucy');
+const value = ref();
+const inputRef = ref();
+const name = ref();
 
-const addItem = () => {
+const addItem = e => {
+  e.preventDefault();
   console.log('addItem');
-  items.value.push(`New item ${(index += 1)}`);
+  items.value.push(name.value || `New item ${(index += 1)}`);
+  name.value = '';
+  setTimeout(() => {
+    inputRef.value?.focus();
+  }, 0);
 };
 </script>

components/vc-select/BaseSelect.tsx

@@ -27,6 +27,7 @@ import {
   toRefs,
   watch,
   watchEffect,
+  ref,
 } from 'vue';
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
@@ -280,6 +281,7 @@ export default defineComponent({
     const triggerRef = shallowRef<RefTriggerProps>(null);
     const selectorRef = shallowRef<RefSelectorProps>(null);
     const listRef = shallowRef<RefOptionListProps>(null);
+    const blurRef = ref<boolean>(false);
 
     /** Used for component focused management */
     const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
@@ -339,10 +341,10 @@ export default defineComponent({
     const onToggleOpen = (newOpen?: boolean) => {
       const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen.value;
 
-      if (innerOpen.value !== nextOpen && !props.disabled) {
+      if (!props.disabled) {
         setInnerOpen(nextOpen);
-        if (props.onDropdownVisibleChange) {
-          props.onDropdownVisibleChange(nextOpen);
+        if (mergedOpen.value !== nextOpen) {
+          props.onDropdownVisibleChange && props.onDropdownVisibleChange(nextOpen);
         }
       }
     };
@@ -413,6 +415,9 @@ export default defineComponent({
         if (innerOpen.value && !!props.disabled) {
           setInnerOpen(false);
         }
+        if (props.disabled && !blurRef.value) {
+          setMockFocused(false);
+        }
       },
       { immediate: true },
     );
@@ -524,9 +529,12 @@ export default defineComponent({
     };
 
     const onContainerBlur: FocusEventHandler = (...args) => {
+      blurRef.value = true;
+
       setMockFocused(false, () => {
         focusRef.value = false;
-        onToggleOpen(false);
+        blurRef.value = false;
+        //onToggleOpen(false);
       });
 
       if (props.disabled) {