[LiveComponent] Fix form elements unsynced on load

Let's try to fix #1958
symfony · Nov 14, 2024 · 9cb931c · 9cb931c
1 parent 89c7fa9
commit 9cb931c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -2671,7 +2671,11 @@ class SetValueOntoModelFieldsPlugin {
         });
     }
     synchronizeValueOfModelFields(component) {
-        component.element.querySelectorAll('[data-model]').forEach((element) => {
+        const modelFields = [
+            ...Array.from(component.element.querySelectorAll('[data-model]')),
+            ...Array.from(component.element.querySelectorAll('form,input,select,textarea')),
+        ];
+        modelFields.forEach((element) => {
             if (!(element instanceof HTMLElement)) {
                 throw new Error('Invalid element using data-model.');
             }

diff --git a/src/LiveComponent/assets/src/Component/plugins/SetValueOntoModelFieldsPlugin.ts b/src/LiveComponent/assets/src/Component/plugins/SetValueOntoModelFieldsPlugin.ts
@@ -30,7 +30,12 @@ export default class implements PluginInterface {
      * the "firstName" model.
      */
     private synchronizeValueOfModelFields(component: Component): void {
-        component.element.querySelectorAll('[data-model]').forEach((element: Element) => {
+        const modelFields = [
+            ...Array.from(component.element.querySelectorAll('[data-model]')),
+            ...Array.from(component.element.querySelectorAll('form,input,select,textarea')),
+        ];
+
+        modelFields.forEach((element: Element) => {
             if (!(element instanceof HTMLElement)) {
                 throw new Error('Invalid element using data-model.');
             }