Toolbar number input (#2288)

* 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

@@ -7,8 +7,7 @@
         <input :id="uid"
                :type="options.type"
                :value="options.value"
-               v-bind="options.attrs"
+               v-bind="options.attrs"/>
-               @change="onChange"/>
     </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;
+            this.$emit('change', event.target.value, this.options);
-
+        },
-            if (this.options.type === 'number') {
+        onInput(event) {
-                value = event.target.valueAsNumber;
+            this.$emit('change', event.target.valueAsNumber, this.options);
-            }
-
-            this.$emit('change', value, this.options);
         }
     }
 }