[BUG] - Multiple Selection of the table

[Adrian1jr]

NextUI Version

2.2.9

Describe the bug

Hi, I have a problem related to the selectionMode = "multiple" option of the table, what this does is to generate a checkbox to select multiple rows, but I have in my custom cells a radio button and a checkbox, of which if I press any checkbox of those that are generated by the option "multiple selection" these visually activate the checkbox or radio button in the table row, I checked that it was only visual and not that it was really making them check, but I do not see or I did not find way to make that event of click in the checkboxes not to affect to what I had on my customized cells of my table and prevent that situation.

• I think it would be good to have a new section in the table documentation, where you can add some input or checkbox as a custom cell and use at the same time the "selectionMode ="multiple"" checkbox.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create table.
2. Add the property "selectionMode ="multiple", to add the checkboxes.
3. Add custom cells on the table and use checkbox or radio buttons from nextUI.
4. if you click on the checkbox of the selectionMode you will see the other checkbox or radio buttons being selected.

Expected behavior

That the checkbox of the table can be controlled more thoroughly, and that in the components if I put custom cells a checkbox does not affect another one or a radius does not affect another one.

Screenshots or Videos

Operating System Version

Windows

Browser

Chrome

[Lucasmm016]

I'm also having the same problem, it only happens when multiple selection is activated, for single selection this doesn't happen.

[matteogilioli]

The same thing happens with Switch component. Any updates on this?

[Y-k-Y]

I've faced similar issue today but on Switch component which also uses group class name. So it seems all components that use group class name can be misbehaved if it uses something like group-data-[selected=true] ....

It would be great if we can specify group name to prevent this multiple nesting group bug.

<Switch groupName="switch" /> // it would replace group to group/switch

While fixing the bug i guess we can replace the default style like below

<Switch
  classNames={{
    base: ['group/switch'],
    wrapper: [
      'w-14 bg-[#969696]',
      'group-data-[selected=true]:bg-[#969696]',
      'group-data-[selected=true]/switch:bg-success',
    ],
    thumb: [
      'group-data-[selected=true]:ml-0',
      'group-data-[selected=true]/switch:ml-7',
      'group-data-[selected=true]/switch:group-data-[pressed=true]:ml-7',
    ],
    startContent: [
      'text-xs text-white',
      'group-data-[selected=true]:scale-none',
      'group-data-[selected=true]:opacity-none',
      'group-data-[selected=true]/switch:scale-100',
      'group-data-[selected=true]/switch:opacity-100',
    ],
    endContent: [
      'text-xs text-white',
      'group-data-[selected=true]:opacity-1',
      'group-data-[selected=true]:translate-x-0',
      'group-data-[selected=true]/switch:opacity-0',
      'group-data-[selected=true]/switch:translate-x-3',
    ],
  }}
  color="success"
  startContent={<span>ON</span>}
  endContent={<span>OFF</span>}
/>

But it's too much work i hope this bug will be resolved soon. If anyone wants to know how tailwindcss group works read this doc

[kevinpiac]

I've faced similar issue today but on Switch component which also uses group class name. So it seems all components that use group class name can be misbehaved if it uses something like group-data-[selected=true] ....

It would be great if we can specify group name to prevent this multiple nesting group bug.

<Switch groupName="switch" /> // it would replace group to group/switch

While fixing the bug i guess we can replace the default style like below

<Switch
  classNames={{
    base: ['group/switch'],
    wrapper: [
      'w-14 bg-[#969696]',
      'group-data-[selected=true]:bg-[#969696]',
      'group-data-[selected=true]/switch:bg-success',
    ],
    thumb: [
      'group-data-[selected=true]:ml-0',
      'group-data-[selected=true]/switch:ml-7',
      'group-data-[selected=true]/switch:group-data-[pressed=true]:ml-7',
    ],
    startContent: [
      'text-xs text-white',
      'group-data-[selected=true]:scale-none',
      'group-data-[selected=true]:opacity-none',
      'group-data-[selected=true]/switch:scale-100',
      'group-data-[selected=true]/switch:opacity-100',
    ],
    endContent: [
      'text-xs text-white',
      'group-data-[selected=true]:opacity-1',
      'group-data-[selected=true]:translate-x-0',
      'group-data-[selected=true]/switch:opacity-0',
      'group-data-[selected=true]/switch:translate-x-3',
    ],
  }}
  color="success"
  startContent={<span>ON</span>}
  endContent={<span>OFF</span>}
/>

But it's too much work i hope this bug will be resolved soon. If anyone wants to know how tailwindcss group works read this doc

Hey!

Thanks for explaining the issue and coming up with this workaround.

I have tried your solution but it does not entirely work for me (the switch becomes impossible to toggle).

I'm curious to know if you came up with another workaround that you could share?