fix: global `mousedown` handler in picker input hooks (#5657)

pull/5669/head
Gin 2022-06-03 14:28:44 +08:00 committed by GitHub
parent 3cd7ca3e0b
commit 18ce00d239
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 22 deletions

View File

@ -1,5 +1,5 @@
import type { ComputedRef, HTMLAttributes, Ref } from 'vue';
import { onBeforeUnmount, watchEffect, watch, ref, computed } from 'vue';
import { onBeforeUnmount, onMounted, watch, ref, computed } from 'vue';
import type { FocusEventHandler } from '../../_util/EventInterface';
import KeyCode from '../../_util/KeyCode';
import { addGlobalMousedownEvent, getTargetFromEvent } from '../utils/uiUtil';
@ -148,30 +148,26 @@ export default function usePickerInput({
});
const globalMousedownEvent = ref();
// Global click handler
watchEffect(
() =>
globalMousedownEvent.value &&
globalMousedownEvent.value()(
(globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
const target = getTargetFromEvent(e);
onMounted(() => {
globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
const target = getTargetFromEvent(e);
if (open) {
const clickedOutside = isClickOutside(target);
if (open.value) {
const clickedOutside = isClickOutside(target);
if (!clickedOutside) {
preventBlurRef.value = true;
if (!clickedOutside) {
preventBlurRef.value = true;
// Always set back in case `onBlur` prevented by user
raf(() => {
preventBlurRef.value = false;
});
} else if (!focused.value || clickedOutside) {
triggerOpen(false);
}
}
})),
),
);
// Always set back in case `onBlur` prevented by user
raf(() => {
preventBlurRef.value = false;
});
} else if (!focused.value || clickedOutside) {
triggerOpen(false);
}
}
});
});
onBeforeUnmount(() => {
globalMousedownEvent.value && globalMousedownEvent.value();
});