DataTable: selectionMode={"checkbox"} adds an extra checkmark

[SympleSynz]

Describe the bug

When adding selectionMode={"checkbox"}, clicking the checkbox adds an extra checkmark. When inspecting the elements, it appears an extra div is added below the input tag which is causing the second checkmark.

When selecting the header checkbox, the checkbox becomes off centered along with a secondary checkmark

After downgrading to PrimeReact version 10.5.1, the bug disappeared

Reproducer

No response

PrimeReact version

10.6.3

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

1. Create a dataTable with a defined type e.g. <DataTable<NonNullable<NotesValue>[]>
2. Add the selectionMode={"checkbox"}, selection={selectedNotes}, onSelectionChange={(e) => setSelectedNotes(e.value)}
3. Add the checkbox column: <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}/>
4. Go to rendered table and click a checkbox

Expected behavior

A single checkmark should be in the box. The header checkbox should not move.

[sja-cslab]

Do you have updated the Theme too? The Datatable got some changes in the lasts version(s) and some are incompatible with previous css

[melloware]

Yep you need to update your theme your current CSS is wrong that is why it doesn;t work in 10.6.3.

[SympleSynz]

Thanks for the quick response

[paustint]

@melloware - Can you be more specific? Are there docs on what needs to be updated regarding the theme? I am just using some custom scss to modify styling, but that's basically it and I am having the same result here as well.

Coming from 10.0.3

[SympleSynz]

@paustint I am not sure if this helps you or not, since my org chose not to update the theme, we had to use the passthrough option as a workaround for fixing the extra checkmark

[paustint]

Appreciate it - We are only using the datatable and no other components from the library and our theme was setup a couple years ago so it is a bit of a mess.... Not something I want to spend hours diving into.

I'lll take a look into the passthrough, otherwise I think I can figure out how to override the CSS needed - but it is quite annoying, :D Thanks for your input!