Form reset adjustments

src/components/PageComponents/ModuleConfig/MQTT.tsx

@@ -50,19 +50,26 @@ export const MQTT = ({ onFormInit }: MqttModuleConfigProps) => {
     );
   };
 
+  const populateDefaultValues = (
+    cfg: Protobuf.ModuleConfig.ModuleConfig_MQTTConfig | undefined,
+  ) => {
+    return cfg
+      ? {
+        ...cfg,
+        mapReportSettings: cfg.mapReportSettings ??
+          { publishIntervalSecs: 0, positionPrecision: 10 },
+      }
+      : undefined;
+  };
+
   return (
     <DynamicForm<MqttValidation>
       onSubmit={onSubmit}
       onFormInit={onFormInit}
       validationSchema={MqttValidationSchema}
       formId="ModuleConfig_MqttConfig"
-      defaultValues={moduleConfig.mqtt}
+      defaultValues={populateDefaultValues(moduleConfig.mqtt)}
-      values={(() => {
+      values={populateDefaultValues(getEffectiveModuleConfig("mqtt"))}
-        const cfg = getEffectiveModuleConfig("mqtt");
-        return cfg
-          ? { ...cfg, mapReportSettings: cfg.mapReportSettings ?? {} }
-          : undefined;
-      })()}
       fieldGroups={[
         {
           label: t("mqtt.title"),

src/pages/Config/index.tsx

@@ -27,6 +27,8 @@ const ConfigPage = () => {
     connection,
     removeWorkingConfig,
     removeWorkingModuleConfig,
+    setConfig,
+    setModuleConfig,
   } = useDevice();
   const { hasErrors } = useAppStore();
 
@@ -35,9 +37,7 @@ const ConfigPage = () => {
   >("device");
   const [isSaving, setIsSaving] = useState(false);
   const [formMethods, setFormMethods] = useState<UseFormReturn | null>(null);
-
   const { toast } = useToast();
-  const isError = hasErrors();
   const { t } = useTranslation("deviceConfig");
 
   const onFormInit = (methods: UseFormReturn) => {
@@ -51,33 +51,30 @@ const ConfigPage = () => {
         description: t("toast.validationError.description"),
       });
     }
-    if (
-      (activeConfigSection === "device" && workingConfig.length === 0) ||
-      (activeConfigSection === "module" && workingModuleConfig.length === 0)
-    ) return;
 
     setIsSaving(true);
+
     try {
       await Promise.all(
-        workingConfig.map((config) =>
+        workingConfig.map((newConfig) =>
-          connection?.setConfig(config).then(() =>
+          connection?.setConfig(newConfig).then(() => {
             toast({
               title: t("toast.saveSuccess.title"),
               description: t("toast.saveSuccess.description", {
-                case: config.payloadVariant.case,
+                case: newConfig.payloadVariant.case,
               }),
-            })
+            });
-          )
+          })
         ),
       );
 
       await Promise.all(
-        workingModuleConfig.map((moduleConfig) =>
+        workingModuleConfig.map((newModuleConfig) =>
-          connection?.setModuleConfig(moduleConfig).then(() =>
+          connection?.setModuleConfig(newModuleConfig).then(() =>
             toast({
               title: t("toast.saveSuccess.title"),
               description: t("toast.saveSuccess.description", {
-                case: moduleConfig.payloadVariant.case,
+                case: newModuleConfig.payloadVariant.case,
               }),
             })
           )
@@ -85,16 +82,19 @@ const ConfigPage = () => {
       );
 
       await connection?.commitEditSettings().then(() => {
-        removeWorkingConfig();
-        removeWorkingModuleConfig();
-
         if (formMethods) {
-          formMethods.reset({
+          formMethods.reset({}, {
-            keepDefaultValues: true,
+            keepValues: true,
-            keepDirty: false,
-            keepDirtyValues: true,
           });
         }
+
+        workingConfig.map((newConfig) => setConfig(newConfig));
+        workingModuleConfig.map((newModuleConfig) =>
+          setModuleConfig(newModuleConfig)
+        );
+
+        removeWorkingConfig();
+        removeWorkingModuleConfig();
       });
     } catch (_error) {
       toast({
@@ -145,13 +145,23 @@ const ConfigPage = () => {
   );
 
   const buttonOpacity = useMemo(
-    () => (formMethods?.formState.isDirty ||
+    () => (formMethods?.formState.isDirty &&
+          Object.keys(formMethods?.formState.dirtyFields ?? {}).length > 0 ||
         workingConfig.length > 0 || workingModuleConfig.length > 0
       ? "opacity-100"
       : "opacity-0"),
-    [formMethods?.formState.isDirty, workingConfig, workingModuleConfig],
+    [
+      formMethods?.formState.isDirty,
+      formMethods?.formState.dirtyFields,
+      workingConfig,
+      workingModuleConfig,
+    ],
   );
 
+  const isValid = useMemo(() => {
+    return Object.keys(formMethods?.formState.errors ?? {}).length === 0;
+  }, [formMethods?.formState.errors]);
+
   const actions = useMemo(() => [
     {
       key: "unsavedChanges",
@@ -172,19 +182,22 @@ const ConfigPage = () => {
     },
     {
       key: "save",
-      icon: isError ? SaveOff : SaveIcon,
+      icon: !isValid ? SaveOff : SaveIcon,
       isLoading: isSaving,
       disabled: isSaving ||
+        !isValid ||
         (workingConfig.length === 0 && workingModuleConfig.length === 0),
-      iconClasses: isError ? "text-red-400 cursor-not-allowed" : "",
+      iconClasses: !isValid ? "text-red-400 cursor-not-allowed" : "",
       onClick: handleSave,
       label: t("common:button.save"),
     },
   ], [
     activeConfigSection,
-    isError,
     isSaving,
+    isValid,
     buttonOpacity,
+    workingConfig,
+    workingModuleConfig,
   ]);
 
   return (

src/validation/moduleConfig/mqtt.ts

@@ -1,8 +1,8 @@
 import { z } from "zod/v4";
 
 export const MqttValidationMapReportSettingsSchema = z.object({
-  publishIntervalSecs: z.number().optional(),
+  publishIntervalSecs: z.coerce.number().int(),
-  positionPrecision: z.number().optional(),
+  positionPrecision: z.coerce.number().int(),
 });
 
 export const MqttValidationSchema = z.object({