fix: mentions cannot select, close #5233

Author: tangjinzhou

components/menu/src/Menu.tsx

@@ -27,7 +27,7 @@ import SubMenu from './SubMenu';
 import EllipsisOutlined from '@ant-design/icons-vue/EllipsisOutlined';
 import { cloneElement } from '../../_util/vnode';
 import { OVERFLOW_KEY, PathContext } from './hooks/useKeyPath';
-import type { FocusEventHandler } from '../../_util/EventInterface';
+import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
 
 export const menuProps = {
   id: String,
@@ -64,6 +64,7 @@ export const menuProps = {
   onClick: [Function, Array] as PropType<MenuClickEventHandler>,
   onFocus: Function as PropType<FocusEventHandler>,
   onBlur: Function as PropType<FocusEventHandler>,
+  onMousedown: Function as PropType<MouseEventHandler>,
   'onUpdate:openKeys': Function as PropType<(keys: Key[]) => void>,
   'onUpdate:selectedKeys': Function as PropType<(keys: Key[]) => void>,
   'onUpdate:activeKey': Function as PropType<(key: Key) => void>,
@@ -422,6 +423,7 @@ export default defineComponent({
         <>
           <Overflow
             {...attrs}
+            onMousedown={props.onMousedown}
             prefixCls={`${prefixCls.value}-overflow`}
             component="ul"
             itemComponent={MenuItem}

components/vc-mentions/src/DropdownMenu.tsx

@@ -1,6 +1,6 @@
 import Menu, { Item as MenuItem } from '../../menu';
 import type { PropType } from 'vue';
-import { defineComponent, inject, ref } from 'vue';
+import { onBeforeUnmount, defineComponent, inject, ref } from 'vue';
 import type { OptionProps } from './Option';
 import MentionsContextKey from './MentionsContext';
 import Spin from '../../spin';
@@ -22,12 +22,21 @@ export default defineComponent({
       setActiveIndex,
       selectOption,
       onFocus = noop,
-      onBlur = noop,
       loading,
     } = inject(MentionsContextKey, {
       activeIndex: ref(),
       loading: ref(false),
     });
+    let timeoutId: any;
+    const onMousedown = (e: MouseEvent) => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        onFocus(e);
+      });
+    };
+    onBeforeUnmount(() => {
+      clearTimeout(timeoutId);
+    });
     return () => {
       const { prefixCls, options } = props;
       const activeOption = options[activeIndex.value] || {};
@@ -40,8 +49,7 @@ export default defineComponent({
             const option = options.find(({ value }) => value === key);
             selectOption(option);
           }}
-          onBlur={onBlur}
-          onFocus={onFocus}
+          onMousedown={onMousedown}
         >
           {!loading.value &&
             options.map((option, index) => {

components/vc-mentions/src/KeywordTrigger.tsx

@@ -92,9 +92,8 @@ export default defineComponent({
           popupTransitionName={transitionName}
           builtinPlacements={BUILT_IN_PLACEMENTS}
           getPopupContainer={getPopupContainer}
-        >
-          {slots.default?.()}
-        </Trigger>
+          v-slots={{ default: slots.default }}
+        ></Trigger>
       );
     };
   },

components/vc-overflow/Overflow.tsx

@@ -2,6 +2,7 @@ import type { CSSProperties, HTMLAttributes, PropType } from 'vue';
 import { computed, defineComponent, ref, watch } from 'vue';
 import ResizeObserver from '../vc-resize-observer';
 import classNames from '../_util/classNames';
+import type { MouseEventHandler } from '../_util/EventInterface';
 import type { Key, VueNode } from '../_util/type';
 import PropTypes from '../_util/vue-types';
 import { OverflowContextProvider } from './context';
@@ -37,6 +38,8 @@ export interface OverflowProps<ItemType> extends HTMLAttributes {
 
   /** When set to `full`, ssr will render full items by default and remove at client side */
   ssr?: 'full';
+
+  onMousedown?: MouseEventHandler;
 }
 
 const Overflow = defineComponent({
@@ -63,6 +66,7 @@ const Overflow = defineComponent({
     onVisibleChange: Function as PropType<(visibleCount: number) => void>,
     /** When set to `full`, ssr will render full items by default and remove at client side */
     ssr: String as PropType<'full'>,
+    onMousedown: Function as PropType<MouseEventHandler>,
   },
   emits: ['visibleChange'],
   setup(props, { attrs, emit }) {
@@ -247,6 +251,7 @@ const Overflow = defineComponent({
         suffix,
         component: Component = 'div' as any,
         id,
+        onMousedown,
       } = props;
       const { class: className, style, ...restAttrs } = attrs;
       let suffixStyle: CSSProperties = {};
@@ -346,6 +351,7 @@ const Overflow = defineComponent({
           id={id}
           class={classNames(!invalidate.value && prefixCls, className)}
           style={style}
+          onMousedown={onMousedown}
           {...restAttrs}
         >
           {mergedData.value.map(internalRenderItemNode)}