fix: select dropdown custom input error #7020

Author: tangjinzhou

components/vc-select/BaseSelect.tsx

@@ -510,7 +510,6 @@ export default defineComponent({
     // ========================== Focus / Blur ==========================
     /** Record real focus status */
     const focusRef = shallowRef(false);
-
     const onContainerFocus: FocusEventHandler = (...args) => {
       setMockFocused(true);
 
@@ -527,14 +526,16 @@ export default defineComponent({
 
       focusRef.value = true;
     };
-
+    const popupFocused = ref(false);
     const onContainerBlur: FocusEventHandler = (...args) => {
+      if (popupFocused.value) {
+        return;
+      }
       blurRef.value = true;
-
       setMockFocused(false, () => {
         focusRef.value = false;
         blurRef.value = false;
-        //onToggleOpen(false);
+        onToggleOpen(false);
       });
 
       if (props.disabled) {
@@ -557,6 +558,12 @@ export default defineComponent({
         props.onBlur(...args);
       }
     };
+    const onPopupFocusin = () => {
+      popupFocused.value = true;
+    };
+    const onPopupFocusout = () => {
+      popupFocused.value = false;
+    };
     provide('VCSelectContainerEvent', {
       focus: onContainerFocus,
       blur: onContainerBlur,
@@ -818,6 +825,8 @@ export default defineComponent({
           getTriggerDOMNode={() => selectorDomRef.current}
           onPopupVisibleChange={onTriggerVisibleChange}
           onPopupMouseEnter={onPopupMouseEnter}
+          onPopupFocusin={onPopupFocusin}
+          onPopupFocusout={onPopupFocusout}
           v-slots={{
             default: () => {
               return customizeRawInputElement ? (

components/vc-select/SelectTrigger.tsx

@@ -71,6 +71,8 @@ export interface SelectTriggerProps {
   onPopupVisibleChange?: (visible: boolean) => void;
 
   onPopupMouseEnter: () => void;
+  onPopupFocusin: () => void;
+  onPopupFocusout: () => void;
 }
 
 const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
@@ -97,6 +99,8 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
     getTriggerDOMNode: Function,
     onPopupVisibleChange: Function as PropType<(open: boolean) => void>,
     onPopupMouseEnter: Function,
+    onPopupFocusin: Function,
+    onPopupFocusout: Function,
   } as any,
   setup(props, { slots, attrs, expose }) {
     const builtInPlacements = computed(() => {
@@ -129,6 +133,8 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
         getTriggerDOMNode,
         onPopupVisibleChange,
         onPopupMouseEnter,
+        onPopupFocusin,
+        onPopupFocusout,
       } = restProps as SelectTriggerProps;
       const dropdownPrefixCls = `${prefixCls}-dropdown`;
 
@@ -167,7 +173,12 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
           v-slots={{
             default: slots.default,
             popup: () => (
-              <div ref={popupRef} onMouseenter={onPopupMouseEnter}>
+              <div
+                ref={popupRef}
+                onMouseenter={onPopupMouseEnter}
+                onFocusin={onPopupFocusin}
+                onFocusout={onPopupFocusout}
+              >
                 {popupNode}
               </div>
             ),