ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use effect and state to disable clear button: prevent hydration errors if the field is initialized differently in the client

This commit is contained in:
Riccardo Balbo 2024-10-24 16:21:37 +02:00
parent 820ea90267
commit 9c6e98b47b
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/form.js
View File

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