Process expandable initial data also for none required expandables (#24733)

* Process expandable initial data also for none required expandables

* Update compute-initial-ha-form-data.ts

* check required fields of sections too when submitting

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -13,6 +13,12 @@ export const computeInitialHaFormData = (
       data[field.name] = field.description.suggested_value;
     } else if ("default" in field) {
       data[field.name] = field.default;
+    } else if (field.type === "expandable") {
+      const expandableData = computeInitialHaFormData(field.schema);
+      if (field.required || Object.keys(expandableData).length) {
+        // Only add expandable data if it's required or any of its children have initial values.
+        data[field.name] = expandableData;
+      }
     } else if (!field.required) {
       // Do nothing.
     } else if (field.type === "boolean") {
@@ -36,8 +42,6 @@ export const computeInitialHaFormData = (
         minutes: 0,
         seconds: 0,
       };
-    } else if (field.type === "expandable") {
-      data[field.name] = computeInitialHaFormData(field.schema);
     } else if ("selector" in field) {
       const selector: Selector = field.selector;
 

src/dialogs/config-flow/step-flow-form.ts

@@ -144,17 +144,24 @@ class StepFlowForm extends LitElement {
   private async _submitStep(): Promise<void> {
     const stepData = this._stepData || {};
 
+    const checkAllRequiredFields = (
+      schema: readonly HaFormSchema[],
+      data: Record<string, any>
+    ) =>
+      schema.every(
+        (field) =>
+          (!field.required || !["", undefined].includes(data[field.name])) &&
+          (field.type !== "expandable" ||
+            (!field.required && data[field.name] === undefined) ||
+            checkAllRequiredFields(field.schema, data[field.name]))
+      );
+
     const allRequiredInfoFilledIn =
       stepData === undefined
         ? // If no data filled in, just check that any field is required
           this.step.data_schema.find((field) => field.required) === undefined
         : // If data is filled in, make sure all required fields are
-          stepData &&
+          checkAllRequiredFields(this.step.data_schema, stepData);
-          this.step.data_schema.every(
-            (field) =>
-              !field.required ||
-              !["", undefined].includes(stepData![field.name])
-          );
 
     if (!allRequiredInfoFilledIn) {
       this._errorMsg = this.hass.localize(