[bug]: Incident bug validateDOMNesting(...): <button> cannot appear as a descendant of <button>

[minhsu12113]

Describe the bug

I creating tree compoent with checkbox like the below image

That component reference: https://github.com/shadcn-ui/ui/issues/355#issuecomment-1703767574

I'm notice if I put the Checkbox inside Tree item then I get error: validateDOMNesting(...): cannot appear as a descendant of because the base implement Checkbox base on the Button that cause error.

<div className='flex items-center gap-2'>
    <Checkbox />
    <span className='text-sm truncate'>{item.name}</span>
</div>

Affected component/components

CheckBox

How to reproduce

1. Implement component : https://github.com/shadcn-ui/ui/issues/355#issuecomment-1703767574
2. Add check box inside TreeItem
3. Render Tree component

Codesandbox/StackBlitz link

No response

Logs

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of

System Info

- React 18
- Chrome Version 130.0.6723.117 (Official Build) (64-bit)

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[minhsu12113]

For anyone facing same issue as I am, you can use input type checkbox instead of button. You might want to re-style the input as needed.

<div className='flex items-center gap-2 w-full'>
    <input
       type='checkbox'
       className='rounded-sm w-4 h-4  focus:ring-primary text-primary dark:focus:ring-primary dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600' />
       <span className='flex-grow text-sm truncate'>{item.name}</span>
</div>