fix(input-field): onChange with number input emits a number instead o…

…f string
Lundalogik · Sep 10, 2019 · b3a63c4 · b3a63c4
1 parent c8c8e0c
commit b3a63c4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -15,18 +15,18 @@ export class InputFieldNumberExample {
     @State()
     public value: any;
     @State()
-    public formatOnNumber: boolean = true;
+    public formatNumber: boolean = true;
 
     public render() {
         return [
             <section>
                 <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}