use useIsClient

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) => {