From d0ab59f9dac736d240cefcb6b2529787673fa3c0 Mon Sep 17 00:00:00 2001
From: Pegah Sarram <pegahsarram@gmail.com>
Date: Wed, 13 Feb 2019 12:16:52 -0800
Subject: [PATCH] Toolbar number input (#2288)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Listen for ‘input’ event when input type is number, otherwise listen for 'change' event.

* Remove checks for options type in the event handlers.
---
 src/ui/toolbar/components/toolbar-input.vue | 28 ++++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/ui/toolbar/components/toolbar-input.vue b/src/ui/toolbar/components/toolbar-input.vue
index 7d4773195e..060c5fe8f2 100644
--- a/src/ui/toolbar/components/toolbar-input.vue
+++ b/src/ui/toolbar/components/toolbar-input.vue
@@ -7,8 +7,7 @@
         <input :id="uid"
                :type="options.type"
                :value="options.value"
-               v-bind="options.attrs"
-               @change="onChange"/>
+               v-bind="options.attrs"/>
     </div>
 </template>
 
@@ -31,15 +30,26 @@ export default {
             uid: `mct-input-id-${inputUniqueId}`
         };
     },
+    mounted() {
+        if (this.options.type === 'number') {
+            this.$el.addEventListener('input', this.onInput);
+        } else {
+            this.$el.addEventListener('change', this.onChange);
+        }
+    },
+    beforeDestroy() {
+        if (this.options.type === 'number') {
+            this.$el.removeEventListener('input', this.onInput);
+        } else {
+            this.$el.removeEventListener('change', this.onChange);
+        }
+    },
     methods: {
         onChange(event) {
-            let value = event.target.value;
-
-            if (this.options.type === 'number') {
-                value = event.target.valueAsNumber;
-            }
-
-            this.$emit('change', value, this.options);
+            this.$emit('change', event.target.value, this.options);
+        },
+        onInput(event) {
+            this.$emit('change', event.target.valueAsNumber, this.options);
         }
     }
 }