Update click outside events to limit only to click events, ignoring blur (#1953)

This commit is contained in:
Mutasem Aldmour 2021-06-30 10:17:30 +03:00 committed by GitHub
parent 38f0cc1a8f
commit a080fab1f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 9 deletions

View file

@ -10,7 +10,7 @@
@keydown.esc="onEscape" @keydown.esc="onEscape"
ref="input" ref="input"
size="4" size="4"
v-click-outside="onBlur" v-click-outside="onClickOutside"
/> />
</ExpandableInputBase> </ExpandableInputBase>
</template> </template>
@ -47,8 +47,10 @@ export default Vue.extend({
onEnter() { onEnter() {
this.$emit('enter', (this.$refs.input as HTMLInputElement).value); this.$emit('enter', (this.$refs.input as HTMLInputElement).value);
}, },
onBlur() { onClickOutside(e: Event) {
this.$emit('blur', (this.$refs.input as HTMLInputElement).value); if (e.type === 'click') {
this.$emit('blur', (this.$refs.input as HTMLInputElement).value);
}
}, },
onEscape() { onEscape() {
this.$emit('esc'); this.$emit('esc');

View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<SlideTransition> <SlideTransition>
<div class="node-creator" v-if="active" v-click-outside="closeCreator"> <div class="node-creator" v-if="active" v-click-outside="onClickOutside">
<MainPanel @nodeTypeSelected="nodeTypeSelected" :categorizedItems="categorizedItems" :categoriesWithNodes="categoriesWithNodes" :searchItems="searchItems"></MainPanel> <MainPanel @nodeTypeSelected="nodeTypeSelected" :categorizedItems="categorizedItems" :categoriesWithNodes="categoriesWithNodes" :searchItems="searchItems"></MainPanel>
</div> </div>
</SlideTransition> </SlideTransition>
@ -64,8 +64,10 @@ export default Vue.extend({
}, },
}, },
methods: { methods: {
closeCreator () { onClickOutside (e: Event) {
this.$emit('closeNodeCreator'); if (e.type === 'click') {
this.$emit('closeNodeCreator');
}
}, },
nodeTypeSelected (nodeTypeName: string) { nodeTypeSelected (nodeTypeName: string) {
this.$emit('nodeTypeSelected', nodeTypeName); this.$emit('nodeTypeSelected', nodeTypeName);

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="{'tags-container': true, focused}" @keydown.stop v-click-outside="onBlur"> <div :class="{'tags-container': true, focused}" @keydown.stop v-click-outside="onClickOutside">
<el-select <el-select
:popperAppendToBody="false" :popperAppendToBody="false"
:value="appliedTags" :value="appliedTags"
@ -215,8 +215,10 @@ export default mixins(showMessage).extend({
this.focusOnInput(); this.focusOnInput();
}); });
}, },
onBlur() { onClickOutside(e: Event) {
this.$emit('blur'); if (e.type === 'click') {
this.$emit('blur');
}
}, },
}, },
watch: { watch: {