@dile/ui 3.7.0 → 3.7.1

package/components/input/input-number.spec.js

@@ -33,7 +33,7 @@ describe('dile-input-number', () => {
     input.dispatchEvent(new Event('input'));
     await el.updateComplete;
 
-    expect(el.value).toBe('12,75');
+    expect(el.value).toBe('12.75');
     expect(input.value).toBe('12,75');
   });
 
@@ -57,7 +57,7 @@ describe('dile-input-number', () => {
     input.dispatchEvent(new Event('blur'));
     await el.updateComplete;
 
-    expect(el.value).toBe('1,25');
+    expect(el.value).toBe('1.25');
     expect(input.value).toBe('1,25');
   });
 
@@ -65,6 +65,7 @@ describe('dile-input-number', () => {
     const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="blur"></dile-input-number>');
     const input = el.shadowRoot.querySelector('input');
 
+    input.dispatchEvent(new Event('focus'));
     input.value = '12.75';
     input.dispatchEvent(new Event('input'));
     await el.updateComplete;
@@ -75,7 +76,7 @@ describe('dile-input-number', () => {
     input.dispatchEvent(new Event('blur'));
     await el.updateComplete;
 
-    expect(el.value).toBe('12,75');
+    expect(el.value).toBe('12.75');
     expect(input.value).toBe('12,75');
   });
 
@@ -90,7 +91,19 @@ describe('dile-input-number', () => {
     input.dispatchEvent(new Event('input'));
     await el.updateComplete;
 
-    expect(el.value).toBe('12,75');
+    expect(el.value).toBe('12.75');
     expect(input.value).toBe('12,75');
   });
+
+  it('keeps canonical value when normalizeOn fallback applies', async () => {
+    const el = await renderInputNumber('<dile-input-number name="amount" decimalSeparator="," normalizeOn="foo"></dile-input-number>');
+    const input = el.shadowRoot.querySelector('input');
+
+    input.value = '8,5';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('8.5');
+    expect(input.value).toBe('8,5');
+  });
 });

package/components/input/src/DileInputNumber.js

@@ -37,6 +37,8 @@ export class DileInputNumber extends DileInput {
         this.decimals = null;
         this.normalizeOn = 'input';
         this.changed = false;
+        this.viewValueOnFocus = null;
+        this.isInputFocused = false;
     }
 
     firstUpdated() {
@@ -88,14 +90,21 @@ export class DileInputNumber extends DileInput {
         return sanitized;
     }
 
+    normalizeToCanonical(value) {
+        return this.sanitizeValue(value, { normalizeSeparator: false }).replace(',', '.');
+    }
+
+    sanitizeForView(value) {
+        return this.sanitizeValue(value, { normalizeSeparator: false });
+    }
+
     normalizeForForm(value) {
         if (!value) {
             return '';
         }
         return value
             .toString()
-            .replace(this.safeDecimalSeparator, '.')
-            .replace(this.alternateDecimalSeparator, '.');
+            .replace(',', '.');
     }
 
     get normalizeOnBlur() {
@@ -160,13 +169,13 @@ export class DileInputNumber extends DileInput {
 
     formatNumber(number) {
         if (this.hasDecimalsConstraint()) {
-            return number.toFixed(this.decimals).replace('.', this.safeDecimalSeparator);
+            return number.toFixed(this.decimals);
         }
-        return number.toString().replace('.', this.safeDecimalSeparator);
+        return number.toString();
     }
 
     normalizeAndConstrain(value) {
-        const sanitized = this.sanitizeValue(value);
+        const sanitized = this.normalizeToCanonical(value);
         const parsed = this.toNumber(sanitized);
 
         if (isNaN(parsed)) {
@@ -211,13 +220,20 @@ export class DileInputNumber extends DileInput {
     }
 
     _input(e) {
-        const sanitized = this.sanitizeValue(e.target.value, {
-            normalizeSeparator: !this.normalizeOnBlur,
-        });
-        if (sanitized !== e.target.value) {
-            e.target.value = sanitized;
+        const sanitizedForView = this.sanitizeForView(e.target.value);
+        if (sanitizedForView !== e.target.value) {
+            e.target.value = sanitizedForView;
+        }
+        this.viewValueOnFocus = sanitizedForView;
+        this.value = this.normalizeToCanonical(sanitizedForView);
+
+        if (!this.normalizeOnBlur) {
+            const formatted = this.computeValue(this.value);
+            if (e.target.value !== formatted) {
+                e.target.value = formatted;
+                this.viewValueOnFocus = formatted;
+            }
         }
-        this.value = sanitized;
 
         if (this.hideErrorOnInput && this.errored) {
           this.clearError();
@@ -225,6 +241,8 @@ export class DileInputNumber extends DileInput {
     }
 
     doBlur(e) {
+        this.isInputFocused = false;
+        this.viewValueOnFocus = null;
         const num = this.normalizeAndConstrain(e.target.value);
 
         if (num !== e.target.value || this.changed) {
@@ -232,6 +250,15 @@ export class DileInputNumber extends DileInput {
             this.emmitChange();
             this.changed = false;
         }
+
+        if (this.normalizeOnBlur) {
+            this.el.value = this.computeValue(this.value);
+        }
+    }
+
+    doFocus() {
+        this.isInputFocused = true;
+        super.doFocus();
     }
 
     updated(changedProperties) {
@@ -242,14 +269,6 @@ export class DileInputNumber extends DileInput {
             return;
         }
 
-        if (changedProperties.has('decimalSeparator') && this.value) {
-            const sanitized = this.sanitizeValue(this.value);
-            if (sanitized !== this.value) {
-                this.value = sanitized;
-                return;
-            }
-        }
-
         if (changedProperties.has('value') && this.value) {
             this.changed = true;
         }
@@ -275,8 +294,10 @@ export class DileInputNumber extends DileInput {
     }
 
     computeValue(value) {
-        return this.sanitizeValue(value, {
-            normalizeSeparator: !this.normalizeOnBlur,
-        });
+        if (this.normalizeOnBlur && this.isInputFocused && this.viewValueOnFocus !== null) {
+            return this.viewValueOnFocus;
+        }
+        const canonical = this.normalizeToCanonical(value);
+        return canonical.replace('.', this.safeDecimalSeparator);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "62016dd8f5a9bd165131bc2058be322eb3aea339"
+  "gitHead": "26a2bfb903854225bb67f335e4dd04ac6a4ca1ed"
 }