From a842e4bc0aec8413352c69a99430c3ee8bce6f2a Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Thu, 8 Jul 2021 07:46:20 +0200
Subject: [PATCH] :bug: Fix nodes panel reactivity bug (#1972)

* add keys

* fix nodes panel reactivity bug

* fix lint issues
---
 .../src/components/NodeCreator/ItemIterator.vue |  2 +-
 .../src/components/NodeCreator/NodeCreator.vue  | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/NodeCreator/ItemIterator.vue b/packages/editor-ui/src/components/NodeCreator/ItemIterator.vue
index 7cf00057e..e7a877440 100644
--- a/packages/editor-ui/src/components/NodeCreator/ItemIterator.vue
+++ b/packages/editor-ui/src/components/NodeCreator/ItemIterator.vue
@@ -8,7 +8,7 @@
 			@before-leave="beforeLeave"
 			@leave="leave"
 		>
-			<div v-for="(item, index) in elements" :key="item.key" :class="item.type">
+			<div v-for="(item, index) in elements" :key="item.key" :class="item.type" :data-key="item.key">
 				<CreatorItem
 					:item="item"
 					:active="activeIndex === index && !disabled"
diff --git a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
index ea36daf9b..feb88ee8d 100644
--- a/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/NodeCreator/NodeCreator.vue
@@ -29,9 +29,17 @@ export default Vue.extend({
 	props: [
 		'active',
 	],
+	data() {
+		return {
+			allNodeTypes: [],
+		};
+	},
 	computed: {
+		nodeTypes(): INodeTypeDescription[] {
+			return this.$store.getters.allNodeTypes;
+		},
 		visibleNodeTypes(): INodeTypeDescription[] {
-			return this.$store.getters.allNodeTypes
+			return this.allNodeTypes
 				.filter((nodeType: INodeTypeDescription) => {
 					return !HIDDEN_NODES.includes(nodeType.name);
 				});
@@ -73,6 +81,13 @@ export default Vue.extend({
 			this.$emit('nodeTypeSelected', nodeTypeName);
 		},
 	},
+	watch: {
+		nodeTypes(newList, prevList) {
+			if (prevList.length === 0) {
+				this.allNodeTypes = newList;
+			}
+		},
+	},
 });
 </script>