fix(dropdown): scrollable menu animation

This commit is contained in:
07akioni 2022-07-07 01:34:51 +08:00
parent 5772d68e7b
commit 7437fcff82
3 changed files with 11 additions and 1 deletions

View File

@ -250,7 +250,9 @@ export default defineComponent({
})
// watch
watch(mergedShowRef, (value) => {
if (!value) clearPendingState()
if (!props.animated && !value) {
clearPendingState()
}
})
// methods
function doSelect (key: Key, node: DropdownOption): void {
@ -411,6 +413,10 @@ export default defineComponent({
// show
mergedShow: mergedShowRef,
// methods
handleAfterLeave: () => {
if (!props.animated) return
clearPendingState()
},
doUpdateShow,
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
themeClass: themeClassHandle?.themeClass,
@ -458,6 +464,7 @@ export default defineComponent({
show: this.mergedShow,
theme: mergedTheme.peers.Popover,
themeOverrides: mergedTheme.peerOverrides.Popover,
internalOnAfterLeave: this.handleAfterLeave,
internalRenderBody: renderPopoverBody,
onUpdateShow: this.doUpdateShow,
'onUpdate:show': undefined

View File

@ -199,6 +199,7 @@ export const popoverBaseProps = {
export const popoverProps = {
...(useTheme.props as ThemeProps<PopoverTheme>),
...popoverBaseProps,
internalOnAfterLeave: Function as PropType<() => void>,
internalRenderBody: Function as PropType<InternalRenderBody>
}

View File

@ -69,6 +69,7 @@ export const popoverBodyProps = {
animated: Boolean,
onClickoutside: Function as PropType<(e: MouseEvent) => void>,
internalTrapFocus: Boolean,
internalOnAfterLeave: Function as PropType<() => void>,
// deprecated
minWidth: Number,
maxWidth: Number
@ -447,6 +448,7 @@ export default defineComponent({
this.followerEnabled = true
}}
onAfterLeave={() => {
this.internalOnAfterLeave?.()
this.followerEnabled = false
this.displayed = false
}}