From 9c6e98b47b75868d3ad0aa79210c39b6b7f55d11 Mon Sep 17 00:00:00 2001
From: Riccardo Balbo <riccardo0blb@gmail.com>
Date: Thu, 24 Oct 2024 16:21:37 +0200
Subject: [PATCH 1/3] use effect and state  to disable clear button: prevent
 hydration errors if the field is initialized differently in the client

---
 components/form.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/form.js b/components/form.js
index 26a956af..221fe52b 100644
--- a/components/form.js
+++ b/components/form.js
@@ -524,6 +524,11 @@ function InputInner ({
 
   const remaining = maxLength && maxLength - (field.value || '').length
 
+  const [showClearButton, setShowClearButton] = useState(clear)
+  useEffect(() => {
+    setShowClearButton(clear && field.value)
+  }, [field.value])
+
   return (
     <>
       <InputGroup hasValidation className={inputGroupClassName}>
@@ -538,7 +543,7 @@ function InputInner ({
           isInvalid={invalid}
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
-        {(clear && field.value) &&
+        {showClearButton &&
           <Button
             variant={null}
             onClick={(e) => {

From 68dafa368442963172b221b5a50a2298f1af9ca6 Mon Sep 17 00:00:00 2001
From: Riccardo Balbo <riccardo0blb@gmail.com>
Date: Thu, 24 Oct 2024 16:26:22 +0200
Subject: [PATCH 2/3] disable clear button if field is readonly

---
 components/form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/form.js b/components/form.js
index 221fe52b..c51e587b 100644
--- a/components/form.js
+++ b/components/form.js
@@ -526,8 +526,8 @@ function InputInner ({
 
   const [showClearButton, setShowClearButton] = useState(clear)
   useEffect(() => {
-    setShowClearButton(clear && field.value)
-  }, [field.value])
+    setShowClearButton(clear && field.value && !props.readOnly)
+  }, [field.value, props.readOnly])
 
   return (
     <>

From a267f3a4767717b27c8bcc92e91c2f19778897e5 Mon Sep 17 00:00:00 2001
From: Riccardo Balbo <riccardo0blb@gmail.com>
Date: Thu, 24 Oct 2024 19:58:04 +0200
Subject: [PATCH 3/3] use useIsClient

---
 components/form.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/form.js b/components/form.js
index c51e587b..11052c42 100644
--- a/components/form.js
+++ b/components/form.js
@@ -33,6 +33,7 @@ import EyeClose from '@/svgs/eye-close-line.svg'
 import Info from './info'
 import { useMe } from './me'
 import classNames from 'classnames'
+import { useIsClient } from './use-client'
 
 export class SessionRequiredError extends Error {
   constructor () {
@@ -455,6 +456,7 @@ function InputInner ({
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
   const formik = noForm ? null : useFormikContext()
   const storageKeyPrefix = useContext(StorageKeyPrefixContext)
+  const isClient = useIsClient()
 
   const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + props.name : undefined
 
@@ -524,11 +526,6 @@ function InputInner ({
 
   const remaining = maxLength && maxLength - (field.value || '').length
 
-  const [showClearButton, setShowClearButton] = useState(clear)
-  useEffect(() => {
-    setShowClearButton(clear && field.value && !props.readOnly)
-  }, [field.value, props.readOnly])
-
   return (
     <>
       <InputGroup hasValidation className={inputGroupClassName}>
@@ -543,7 +540,7 @@ function InputInner ({
           isInvalid={invalid}
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
-        {showClearButton &&
+        {(isClient && clear && field.value && !props.readOnly) &&
           <Button
             variant={null}
             onClick={(e) => {