From a080fab1f1e0c7b74491358d27d83133c6113ad4 Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Wed, 30 Jun 2021 10:17:30 +0300
Subject: [PATCH] :zap: Update click outside events to limit only to click
 events, ignoring blur (#1953)

---
 .../components/ExpandableInput/ExpandableInputEdit.vue    | 8 +++++---
 .../editor-ui/src/components/NodeCreator/NodeCreator.vue  | 8 +++++---
 packages/editor-ui/src/components/TagsDropdown.vue        | 8 +++++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index bed1a0c495..b90d8cfb38 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -10,7 +10,7 @@
 			@keydown.esc="onEscape"
 			ref="input"
 			size="4"
-			v-click-outside="onBlur"
+			v-click-outside="onClickOutside"
 		/>
 	</ExpandableInputBase>
 </template>
@@ -47,8 +47,10 @@ export default Vue.extend({
 		onEnter() {
 			this.$emit('enter', (this.$refs.input as HTMLInputElement).value);
 		},
-		onBlur() {
-			this.$emit('blur', (this.$refs.input as HTMLInputElement).value);
+		onClickOutside(e: Event) {
+			if (e.type === 'click') {
+				this.$emit('blur', (this.$refs.input as HTMLInputElement).value);
+			}
 		},
 		onEscape() {
 			this.$emit('esc');
diff --git a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
index 4c9eccf5e0..ea36daf9be 100644
--- a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<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>
 			</div>
 		</SlideTransition>
@@ -64,8 +64,10 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		closeCreator () {
-			this.$emit('closeNodeCreator');
+		onClickOutside (e: Event) {
+			if (e.type === 'click') {
+				this.$emit('closeNodeCreator');
+			}
 		},
 		nodeTypeSelected (nodeTypeName: string) {
 			this.$emit('nodeTypeSelected', nodeTypeName);
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 5afc839159..6eedc1ec05 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -1,5 +1,5 @@
 <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
 			:popperAppendToBody="false"
 			:value="appliedTags"
@@ -215,8 +215,10 @@ export default mixins(showMessage).extend({
 				this.focusOnInput();
 			});
 		},
-		onBlur() {
-			this.$emit('blur');
+		onClickOutside(e: Event) {
+			if (e.type === 'click') {
+				this.$emit('blur');
+			}
 		},
 	},
 	watch: {