@dile/ui 3.7.1 → 3.7.2

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.1",
+  "version": "3.7.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "26a2bfb903854225bb67f335e4dd04ac6a4ca1ed"
+  "gitHead": "47effc45eac082504ecaa3554c8af5a8a1055a38"
 }