[airavata-django-portal] 06/24: AIRAVATA-3477 Fix issue with native input event colliding with web component input event

[ma...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git

commit 9d3931fdccdacb88c7e2f08a0e83d05f59b43b84
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Wed Sep 1 13:27:15 2021 -0400

    AIRAVATA-3477 Fix issue with native input event colliding with web component input event
---
 .../js/web-components/ExperimentEditor.vue         |  4 ---
 .../input-editors/StringInputEditor.vue            | 32 ++++++++++++++++------
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
index a766124..6bb75d0 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/ExperimentEditor.vue
@@ -216,10 +216,6 @@ export default {
       });
     },
     updateInputValue(inputName, event) {
-      if (event.inputType) {
-        // Ignore these fine-grained events about the type of change made
-        return;
-      }
       // web component input events have the current value in a detail array,
       // native input events have the current value in target.value
       const value = Array.isArray(event.detail)
diff --git a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
index 106eca9..8f8cfd4 100644
--- a/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
+++ b/django_airavata/apps/workspace/static/django_airavata_workspace/js/web-components/input-editors/StringInputEditor.vue
@@ -1,13 +1,16 @@
 <template>
   <!-- NOTE: experimentInput is late bound, don't create component until it is available -->
-  <string-input-editor
-    v-if="experimentInput"
-    :id="id"
-    :value="data"
-    :experiment-input="experimentInput"
-    :read-only="readOnly"
-    @input="onInput"
-  />
+  <div>
+    <string-input-editor
+      ref="inputEditor"
+      v-if="experimentInput"
+      :id="id"
+      :value="data"
+      :experiment-input="experimentInput"
+      :read-only="readOnly"
+      @input="onInput"
+    />
+  </div>
 </template>
 
 <script>
@@ -30,6 +33,16 @@ export default {
     StringInputEditor,
   },
   store: vuestore,
+  mounted() {
+    this.$nextTick(() => {
+      // Stop wrapped input editor 'input' event from bubbling up so it doesn't
+      // conflict with this component's 'input' event. (see #onInput)
+      this.$refs.inputEditor.$el.addEventListener('input', this.stopPropagation);
+    })
+  },
+  destroyed() {
+    this.$refs.inputEditor.$el.removeEventListener('input', this.stopPropagation);
+  },
   data() {
     return {
       data: this.value,
@@ -58,6 +71,9 @@ export default {
         this.$el.dispatchEvent(inputEvent);
       }
     },
+    stopPropagation(event) {
+      event.stopPropagation();
+    }
   },
 };
 </script>