@dile/ui 3.7.0 → 3.7.2

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/mixins/form/src/DileForm.js

@@ -20,11 +20,11 @@ export const DileForm = (superclass) => class extends superclass {
     };
   }
 
-  firstUpdated() {
+  async firstUpdated() {
     super.firstUpdated();
     this.firstValue = this.getData();
     if(this.setOnInit) {
-      this.setData(this.setOnInit);
+      await this.setData(this.setOnInit);
     }
   }
 
@@ -32,6 +32,7 @@ export const DileForm = (superclass) => class extends superclass {
     let data = {};
     this.allNodeElements.forEach(node => {
       const name = node.getAttribute('name');
+      if (!name) return;
       const isArray = name.endsWith('[]');
       const fieldName = isArray ? name.slice(0, -2) : name;
       
@@ -47,16 +48,18 @@ export const DileForm = (superclass) => class extends superclass {
     return this.adaptDataOut(data);
   }
 
-  setData(data) {
+  async setData(data) {
+    await this.updateComplete;
     const adaptedData = this.adaptDataIn(data);
-    this.allNodeElements.forEach(node => {
+    const allNodeElements = this.allNodeElements;
+    allNodeElements.forEach(node => {
       const name = node.getAttribute('name');
+      if (!name) return;
       const isArray = name.endsWith('[]');
       const fieldName = isArray ? name.slice(0, -2) : name;
       
       if (isArray && Array.isArray(adaptedData[fieldName])) {
-        // with arrays, the index is the element order in the DOM
-        const arrayElements = Array.from(this.allNodeElements).filter(el => el.getAttribute('name') === name);
+        const arrayElements = Array.from(allNodeElements).filter(el => el.getAttribute('name') === name);
         const elementIndex = arrayElements.indexOf(node);
         if (elementIndex >= 0 && elementIndex < adaptedData[fieldName].length) {
           const value = adaptedData[fieldName][elementIndex];
@@ -104,7 +107,7 @@ export const DileForm = (superclass) => class extends superclass {
   }
 
   resetData() {
-    this.setData(this.firstValue);
+    return this.setData(this.firstValue);
   }
 
   resetField(name) {
@@ -189,7 +192,7 @@ export const DileForm = (superclass) => class extends superclass {
 
   isDirty() {
     const currentData = this.getData();
-    const originProperties = Object.keys(this.firstValue);
+    const originProperties = Object.keys(this.firstValue || {});
     const currentProperties = Object.keys(currentData);
     if (originProperties.length !== currentProperties.length) {
       return true;

package/mixins/form/src/DileForm.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { LitElement, html } from 'lit';
+import { DileForm } from './DileForm.js';
+
+class RaceTestForm extends DileForm(LitElement) {
+  render() {
+    return html`<input name="name" />`;
+  }
+}
+
+if (!customElements.get('race-test-form')) {
+  customElements.define('race-test-form', RaceTestForm);
+}
+
+describe('DileForm', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('applies setData after the first render is ready even when called immediately', async () => {
+    const form = document.createElement('race-test-form');
+    document.body.appendChild(form);
+
+    form.setData({ name: 'Alice' });
+    await form.updateComplete;
+
+    expect(form.shadowRoot.querySelector('input').value).toBe('Alice');
+  });
+});

package/package.json

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