[BUG] - Disabled checkboxes in selectable table do not behaves as expected

[nbusser]

NextUI Version

2.4.6

Describe the bug

When I use a <Table> with a non-undefined selectionMode, all the checkboxed with isDisabled or isReadonly switch state when clicking on a table row.

Here is athe code of my simple component:

"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@nextui-org/table";
import { Checkbox } from "@nextui-org/checkbox";

export default function Home() {
  return (
    <section>
      <h1>Selectable table: KO</h1>
      <Table selectionMode="single">
        <TableHeader>
          <TableColumn>Disabled</TableColumn>
          <TableColumn>Readonly</TableColumn>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>
              <Checkbox isDisabled>Disabled</Checkbox>
            </TableCell>
            <TableCell>
              <Checkbox isReadOnly>Readonly</Checkbox>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>

      <h1>Unselectable table: OK</h1>
      <Table>
        <TableHeader>
          <TableColumn>Disabled</TableColumn>
          <TableColumn>Readonly</TableColumn>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>
              <Checkbox isDisabled>Disabled</Checkbox>
            </TableCell>
            <TableCell>
              <Checkbox isReadOnly>Readonly</Checkbox>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </section>
  );
}

Your Example Website or App

https://github.com/nbusser/nextui-issue-checkbox-tables

Steps to Reproduce the Bug or Issue

1. pnpm i
2. npm run dev
3. Go on localhost:3000

Expected behavior

As a user, I expect being NOT able to change the state of a disabled/readonly checkbox within a table

Screenshots or Videos

https://github.com/user-attachments/assets/334dde76-96d3-44f2-8208-d9a88edd4336

Operating System Version

macOs

Browser

Firefox

[linear[bot]]

ENG-1199 [BUG] - Disabled checkboxes in selectable table do not behaves as expected

[sohan01fw]

@wingkwong can u please assign this issue to me? I will try to solve

[sohan01fw]

it has a linked pr so iam gonna look for other issue

[wingkwong]

oh yes. sorry didn't see it when i assigned.

[TarasVasylivskyy]

also, when we placing the text input inside selectable row, we can't type in this input. Can we disable the 'selectOnRowClick' feature?

[komagic]

navigation text in input/textarea (in table) is not support

[TarasVasylivskyy]

Is this thread still alive ? No activity here.

[sohan01fw]

@TarasVasylivskyy it has linked pr

[TarasVasylivskyy]

@TarasVasylivskyy it has linked pr

I see, but this PR is stuck there.

[GoulartNogueira]

Reproducible examples

Simplest:

https://codesandbox.io/p/devbox/youthful-pine-9qlhqm Notice on mode=none, the input works as expected. On mode=single or multiple, you can't select the input field.

Complete:

Also, there's an example on documentations showing an interactive Dropdown component. Here's another example showing how the Dropdown works perfectly, but the input doesn't: https://codesandbox.io/p/devbox/mutable-wildflower-mljtqm

Things get even crazier if you uncomment the Switch and Checkbox.

[GoulartNogueira]

Probably related to #2324

[TarasVasylivskyy]

Probably need to create an another BUG related to inputs, or some general related to inputs and checkboxes. If @GoulartNogueira can, please do, or i will do it tomorrow.

[kevinpiac]

Hey guys!

Does anyone have a workaround we can use while the PR is being reviewed?

I have the same problem, but using a Switch in my table in selectionMode="multiple".

As mentioned here, it seems to be related to the tailwind group class name feature.

No matter if the Switch is read-only or disabled, the animation still triggers, although the switch "onValueChange" events are not fired.

[wingkwong]

The solution in the linked PR is not correct. As discussed with him in private, I'll take over the fix.