fix: #7313, TriStateCheckbox: Warning: value prop on input should not…

… be null. Consider using an empty string to clear the component or undefined for uncontrolled components.
primefaces · Oct 8, 2024 · 8f0ff83 · 8f0ff83
1 parent 4546037
commit 8f0ff83
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { PrimeReactContext, ariaLabel } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
@@ -14,6 +15,7 @@ export const TriStateCheckbox = React.memo(
         const context = React.useContext(PrimeReactContext);
         const props = TriStateCheckboxBase.getProps(inProps, context);
 
+        const [checkBoxValue, setCheckBoxValue] = useState('');
         const elementRef = React.useRef(null);
 
         const { ptm, cx, isUnstyled } = TriStateCheckboxBase.setMetaData({
@@ -22,19 +24,27 @@ export const TriStateCheckbox = React.memo(
 
         useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, { name: 'tristatecheckbox' });
 
+        useEffect(() => {
+            if ([true, false, ''].includes(props.value)) {
+                setCheckBoxValue(props.value);
+            } else {
+                setCheckBoxValue('');
+            }
+        }, [props.value]);
+
         const onChange = (event) => {
             if (props.disabled || props.readOnly) {
                 return;
             }
 
             let newValue;
 
-            if (props.value === null || props.value === undefined) {
+            if (checkBoxValue === '') {
                 newValue = true;
-            } else if (props.value === true) {
+            } else if (checkBoxValue === true) {
                 newValue = false;
-            } else if (props.value === false) {
-                newValue = null;
+            } else if (checkBoxValue === false) {
+                newValue = '';
             }
 
             if (props.onChange) {
@@ -101,16 +111,16 @@ export const TriStateCheckbox = React.memo(
 
         let icon;
 
-        if (props.value === false) {
+        if (checkBoxValue === false) {
             icon = props.uncheckIcon || <TimesIcon {...uncheckIconProps} />;
-        } else if (props.value === true) {
+        } else if (checkBoxValue === true) {
             icon = props.checkIcon || <CheckIcon {...checkIconProps} />;
         }
 
         const checkIcon = IconUtils.getJSXIcon(icon, { ...checkIconProps }, { props });
 
-        const ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
-        const ariaChecked = props.value ? 'true' : 'false';
+        const ariaValueLabel = checkBoxValue ? ariaLabel('trueLabel') : checkBoxValue === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
+        const ariaChecked = checkBoxValue ? 'true' : 'false';
 
         const boxProps = mergeProps(
             {
@@ -152,8 +162,8 @@ export const TriStateCheckbox = React.memo(
                 'aria-invalid': props.invalid,
                 disabled: props.disabled,
                 readOnly: props.readOnly,
-                value: props.value,
-                checked: props.value,
+                value: checkBoxValue,
+                checked: checkBoxValue,
                 onChange: onChange
             },
             ptm('input')

diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
@@ -4,7 +4,7 @@ import { classNames } from '../utils/Utils';
 const classes = {
     root: ({ props, context }) =>
         classNames('p-tristatecheckbox p-checkbox p-component', {
-            'p-highlight': props.value !== null,
+            'p-highlight': props.value !== '' && props.value !== null,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
             'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
@@ -31,7 +31,7 @@ export const TriStateCheckboxBase = ComponentBase.extend({
         tooltip: null,
         tooltipOptions: null,
         uncheckIcon: null,
-        value: null,
+        value: '',
         children: undefined
     },
     css: {