@@ -32,6 +32,7 @@ import {
32
32
FieldProps ,
33
33
SubmitState ,
34
34
Identifier ,
35
+ UseFieldProps ,
35
36
} from '../types'
36
37
import type { FormLabelAllProps } from '../../../components/FormLabel'
37
38
import HelpButtonInline , {
@@ -159,7 +160,7 @@ function FieldBlock(props: Props) {
159
160
required,
160
161
info,
161
162
warning,
162
- error : errorProp ,
163
+ error,
163
164
disableStatusSummary,
164
165
fieldState,
165
166
disabled,
@@ -175,16 +176,18 @@ function FieldBlock(props: Props) {
175
176
const hasCustomWidth = / \d ( r e m ) $ / . test ( String ( width ) )
176
177
const hasCustomContentWidth = / \d ( r e m ) $ / . test ( String ( contentWidth ) )
177
178
179
+ const infoRef = useRef < UseFieldProps [ 'info' ] > ( )
180
+ const warningRef = useRef < UseFieldProps [ 'warning' ] > ( )
181
+ const errorRef = useRef < UseFieldProps [ 'error' ] > ( )
182
+
178
183
const blockId = useId ( props . id )
179
184
const [ salt , forceUpdate ] = useReducer ( ( ) => ( { } ) , { } )
180
185
const mountedFieldsRef = useRef < MountedFieldsRef > ( { } )
181
186
const fieldStateRef = useRef < SubmitState > ( null )
182
187
const stateRecordRef = useRef < StateRecord > ( { } )
183
188
const fieldStateIdsRef = useRef < FieldErrorIdsRef > ( null )
184
189
const contentsRef = useRef < HTMLDivElement > ( null )
185
- const hasInitiallyErrorProp = useMemo ( ( ) => {
186
- return Boolean ( errorProp )
187
- } , [ ] ) // eslint-disable-line react-hooks/exhaustive-deps
190
+ const hasInitiallyErrorPropRef = useRef ( Boolean ( error ) )
188
191
189
192
const label = useIterateItemNo ( {
190
193
label : labelProp ,
@@ -273,16 +276,18 @@ function FieldBlock(props: Props) {
273
276
)
274
277
275
278
const statusContent = useMemo ( ( ) => {
276
- if ( typeof errorProp !== 'undefined' ) {
279
+ if ( typeof error !== 'undefined' || ( errorRef . current && ! error ) ) {
280
+ errorRef . current = error
277
281
setInternalRecord ( {
278
282
identifier : blockId ,
279
- showInitially : hasInitiallyErrorProp ,
283
+ showInitially : hasInitiallyErrorPropRef . current ,
280
284
type : 'error' ,
281
- content : errorProp ,
285
+ content : error ,
282
286
} )
283
287
}
284
288
285
- if ( typeof warning !== 'undefined' ) {
289
+ if ( typeof warning !== 'undefined' || warningRef . current !== warning ) {
290
+ warningRef . current = warning
286
291
setInternalRecord ( {
287
292
identifier : blockId ,
288
293
showInitially : true ,
@@ -291,7 +296,8 @@ function FieldBlock(props: Props) {
291
296
} )
292
297
}
293
298
294
- if ( typeof info !== 'undefined' ) {
299
+ if ( typeof info !== 'undefined' || infoRef . current !== info ) {
300
+ infoRef . current = info
295
301
setInternalRecord ( {
296
302
identifier : blockId ,
297
303
showInitially : true ,
@@ -405,13 +411,12 @@ function FieldBlock(props: Props) {
405
411
return acc
406
412
} , salt ) as StatusContent
407
413
} , [
408
- errorProp ,
414
+ error ,
409
415
warning ,
410
416
info ,
411
417
salt ,
412
418
setInternalRecord ,
413
419
blockId ,
414
- hasInitiallyErrorProp ,
415
420
props . id ,
416
421
forId ,
417
422
label ,
@@ -420,9 +425,9 @@ function FieldBlock(props: Props) {
420
425
// Handle the error prop from outside
421
426
useEffect ( ( ) => {
422
427
if ( ! nestedFieldBlockContext ) {
423
- showFieldError ( blockId , Boolean ( errorProp ) )
428
+ showFieldError ( blockId , Boolean ( error ) )
424
429
}
425
- } , [ errorProp , blockId , showFieldError , nestedFieldBlockContext ] )
430
+ } , [ error , blockId , showFieldError , nestedFieldBlockContext ] )
426
431
427
432
useEffect (
428
433
( ) => ( ) => {
@@ -519,7 +524,7 @@ function FieldBlock(props: Props) {
519
524
setBlockRecord,
520
525
setFieldState,
521
526
showFieldError,
522
- hasErrorProp : Boolean ( errorProp ) ,
527
+ hasErrorProp : Boolean ( error ) ,
523
528
fieldStateIdsRef,
524
529
mountedFieldsRef,
525
530
composition,
0 commit comments