diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx index 13a1ddcd8..02982b731 100644 --- a/components/menu/src/Menu.tsx +++ b/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} diff --git a/components/vc-mentions/src/DropdownMenu.tsx b/components/vc-mentions/src/DropdownMenu.tsx index 454403f0a..5660f6019 100644 --- a/components/vc-mentions/src/DropdownMenu.tsx +++ b/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) => { diff --git a/components/vc-mentions/src/KeywordTrigger.tsx b/components/vc-mentions/src/KeywordTrigger.tsx index 3bb9078be..fde89a3dc 100644 --- a/components/vc-mentions/src/KeywordTrigger.tsx +++ b/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> ); }; }, diff --git a/components/vc-overflow/Overflow.tsx b/components/vc-overflow/Overflow.tsx index 12e84f25b..bf6f482ce 100644 --- a/components/vc-overflow/Overflow.tsx +++ b/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)}