From 08c52727fac410537ff165cdfe126c6e5a7a33b5 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Wed, 2 Oct 2024 10:55:26 +0200
Subject: [PATCH] :bug: [open-formulieren/open-forms#4659] Ensure that
 textfield have a valid empty value

---
 src/components/formio/textfield.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/formio/textfield.tsx b/src/components/formio/textfield.tsx
index 287d1ba..cd21c2b 100644
--- a/src/components/formio/textfield.tsx
+++ b/src/components/formio/textfield.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import {Field, useFormikContext} from 'formik';
-import {useContext, useRef} from 'react';
+import {useContext, useEffect, useRef} from 'react';
 
 import {RenderContext} from '@/context';
 import CharCount from '@/utils/charcount';
@@ -48,10 +48,13 @@ export const TextField: React.FC<JSX.IntrinsicElements['input'] & TextFieldProps
     props = {...props, value: ''};
   }
 
-  if (value === undefined || value === null) {
-    // Make sure value is valid
-    setFieldValue(name, '');
-  }
+  useEffect(() => {
+    if (value === undefined || value === null) {
+      // Make sure value is valid
+      setFieldValue(name, '');
+    }
+  }, [value]);
+
 
   // XXX: this is only accepted in the form builder to get to (close to) vanilla form
   // builder feature parity - setting the value with mask placeholders is bad for