1 files changed, 3 insertions, 2 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/useField.tsx b/packages/merchant-backoffice-ui/src/components/form/useField.tsx
index dffb0cc66..c7559faae 100644
--- a/packages/merchant-backoffice-ui/src/components/form/useField.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/useField.tsx
@@ -20,6 +20,7 @@
  */
 
 import { ComponentChildren, VNode } from "preact";
+import { useState } from "preact/hooks";
 import { useFormContext } from "./FormProvider.js";
 
 interface Use<V> {
@@ -37,10 +38,11 @@ export function useField<T>(name: keyof T): Use<T[typeof name]> {
     useFormContext<T>();
   type P = typeof name;
   type V = T[P];
-
+  const [isDirty, setDirty] = useState(false);
   const updateField =
     (field: P) =>
     (value: V): void => {
+      setDirty(true);
       return valueHandler((prev) => {
         return setValueDeeper(prev, String(field).split("."), value);
       });
@@ -50,7 +52,6 @@ export function useField<T>(name: keyof T): Use<T[typeof name]> {
   const defaultFromString = (v: string): V => v as any;
   const value = readField(object, String(name));
   const initial = readField(initialObject, String(name));
-  const isDirty = value !== initial;
   const hasError = readField(errors, String(name));
   return {
     error: isDirty ? hasError : undefined,