TriStateCheckbox: Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.

[junjung929]

Describe the bug

Using TriStateCheckbox component with null value gives console error.

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

I am using the TriStateCheckbox as it is described in the component description https://primereact.org/tristatecheckbox/#basic. However, this provides errors in the console in the browser dev tools. I cannot not prevent the error from the log. Even if I initialized the state to false or true, it gives more errors when changing the state to null.

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

I'm using the code example:

import React, { useState } from "react";
import { TriStateCheckbox } from 'primereact/tristatecheckbox';

export default function BasicDemo() {
    const [value, setValue] = useState(null);

    return (
        <div className="card flex flex-column align-items-center gap-3">
            <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
            <label>{String(value)}</label>
        </div>
    );
}

Any comment would be really appreciated! Thank you!

Reproducer

No response

System Information

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    primereact: latest => 10.8.3 
    react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

1. Go to the demo page https://primereact.org/tristatecheckbox/#basic (primereact version 10.8.3)

2. Click "Edit in StackBlitz" on the Basic TriStateCheckbox example.
   

3. Go to the StackBlitz page for "PrimeReact Demo" and wait the packages are installed for the component.

4. Open the browser dev tools.

5. Error log appears in console.
   

6. Click the checkbox to change the state from null to true.

7. Another error log appears in console.
   

Expected behavior

The errors should not appear in the console of dev tools.

[strawberrymetropolis]

@melloware , @KumJungMin , this problem still persists. You can verify by following the Stackblitz steps as described above in the "Steps to reproduce the behavior" section. I'd appreciate reopening the issue.

[KumJungMin]

@melloware , @KumJungMin , this problem still persists. You can verify by following the Stackblitz steps as described above in the "Steps to reproduce the behavior" section. I'd appreciate reopening the issue.

---

It seems the issue is occurring again — thanks for sharing!

I noticed that a related PR (#8350 ) is currently open.
Would it be okay if I also take a look and investigate the cause?
If it's fine, I can look into reproducing the issue and working on a fix.

[Coderxrohan]

@melloware , @KumJungMin , this problem still persists. You can verify by following the Stackblitz steps as described above in the "Steps to reproduce the behavior" section. I'd appreciate reopening the issue.

It seems the issue is occurring again — thanks for sharing!

I noticed that a related PR (#8350 ) is currently open. Would it be okay if I also take a look and investigate the cause? If it's fine, I can look into reproducing the issue and working on a fix.

Yes sure