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

[minhsu12113]

trafficstars

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>

[shadcn]

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)

[shadcn]

This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)