From b3a63c4998f656915bdf919d2492118ef160d11e Mon Sep 17 00:00:00 2001
From: Johan Groth <johan.groth@lime.tech>
Date: Mon, 26 Nov 2018 12:52:57 +0100
Subject: [PATCH] fix(input-field): onChange with number input emits a number
 instead of string

---
 src/components/input-field/input-field.tsx    | 20 +++++++++++++++----
 .../input-field-number/input-field-number.tsx |  8 ++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index b5d54b3091..85b477d047 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -77,12 +77,12 @@ export class InputField {
 
     /**
      * Set to `true` to format the current value of the input field only
-     * if the field is of the html-type number.
+     * if the field is of type number.
      * The number format is determined by the current language of the browser.
      * Defaults to `true`.
      */
     @Prop({ reflectToAttr: true })
-    public formatOnNumber = true;
+    public formatNumber = true;
 
     @State()
     private mdcTextField;
@@ -140,6 +140,7 @@ export class InputField {
                     required={this.required}
                     disabled={this.disabled}
                     type={this.type}
+                    step="any"
                 />
                 <span
                     class={`
@@ -178,7 +179,7 @@ export class InputField {
             return;
         }
 
-        const renderValue = this.formatOnNumber
+        const renderValue = this.formatNumber
             ? new Intl.NumberFormat(navigator.language).format(
                   Number(this.value)
               )
@@ -189,7 +190,18 @@ export class InputField {
     }
 
     private handleChange(event) {
-        this.change.emit(event.target.value);
+        let value = event.target.value;
+
+        if (this.type === 'number') {
+            if (!value && event.data) {
+                event.stopPropagation();
+                return;
+            }
+
+            value = Number(value);
+        }
+
+        this.change.emit(value);
     }
 
     private handleIconClick() {
diff --git a/src/examples/input-field-number/input-field-number.tsx b/src/examples/input-field-number/input-field-number.tsx
index 7fd9df53d6..b1e3e173b6 100644
--- a/src/examples/input-field-number/input-field-number.tsx
+++ b/src/examples/input-field-number/input-field-number.tsx
@@ -15,7 +15,7 @@ export class InputFieldNumberExample {
     @State()
     public value: any;
     @State()
-    public formatOnNumber: boolean = true;
+    public formatNumber: boolean = true;
 
     public render() {
         return [
@@ -23,10 +23,10 @@ export class InputFieldNumberExample {
                 <limel-button-group>
                     <limel-button
                         onClick={() => {
-                            this.formatOnNumber = !this.formatOnNumber;
+                            this.formatNumber = !this.formatNumber;
                         }}
                         label={
-                            this.formatOnNumber
+                            this.formatNumber
                                 ? 'Unformat number'
                                 : 'Format number'
                         }
@@ -53,7 +53,7 @@ export class InputFieldNumberExample {
                         this.changeHandler(event);
                     }}
                     type="number"
-                    formatOnNumber={this.formatOnNumber}
+                    formatNumber={this.formatNumber}
                     disabled={this.disabled}
                     invalid={this.invalid}
                     required={this.required}