[BUG] - Switch Component isDisabled Prop Not Working When Inside Table Component

[Hashim1995]

NextUI Version

2.2.9

Describe the bug

When placing a **Switch** component inside a **Table** component, the **isDisabled** property fails to function as expected. The **Switch** remains active and clickable regardless of the **isDisabled** state being set to true. However, when the same Switch is used outside of the Table, the isDisabled property works as intended. This inconsistency suggests a potential issue with how Table or Switch handle property or state propagation.

Here is my snippet:

  const [toggleLoading, setToggleLoading] = useState(false);
  
  
  const handleSwitchChange = async (id: number) => {
    setToggleLoading(true);
    try {
      await EmaConnectedMailsService.getInstance().toggleStatus({
        id
      });
    } catch (err) {
      console.log(err); // You might want to handle errors, such as showing a notification
    } finally {
      setToggleLoading(false);
    }
  };
   <TableBody
                isLoading={loading}
                items={data}
                emptyContent={<Empty />}
                loadingContent={<Spinner />}
              >
                {(item: IConnectedMailItem) => (
                  <TableRow
                    className="border-divider border-b-1"
                    key={item?.id}
                  >
                    <TableCell>
                      <div className="flex items-center gap-2">
                        {returnIcon(item?.emailProviderType)} {item?.email}
                      </div>
                    </TableCell>

                    <TableCell>{item?.senderName}</TableCell>

                    <TableCell>
                      <Chip color="secondary">{item?.capacity}</Chip>
                    </TableCell>
                    <TableCell>
                      <CircularProgress
                        size="lg"
                        color={
                          item?.accountHealth < 30
                            ? 'danger'
                            : item?.accountHealth < 70
                            ? 'warning'
                            : 'success'
                        }
                        value={item?.accountHealth}
                        showValueLabel
                        classNames={{
                          value: ' text-default-800 dark:text-white'
                        }}
                      />
                    </TableCell>
                    <TableCell>
                      <Switch
                        isDisabled={toggleLoading}
                        size="sm"
                        defaultSelected={item?.status}
                        onChange={() => handleSwitchChange(item.id)}
                      />
                    </TableCell>
                    <TableCell>
                      <div className="relative flex justify-end items-center gap-2">
                        <Tooltip
                          classNames={{
                            content: 'text-default-800 dark:text-white'
                          }}
                          content={t('editBtn')}
                        >
                          <span
                            aria-hidden
                            // onClick={() => {
                            //   setselectedItem(item);
                            //   editOnOpen();
                            // }}
                            className="active:opacity-50 text-default-400 text-lg cursor-pointer"
                          >
                            <BsPen size={16} />
                          </span>
                        </Tooltip>
                        <Tooltip
                          classNames={{
                            content: 'text-default-800 dark:text-white'
                          }}
                          content={t('delete')}
                        >
                          <span className="active:opacity-50 text-danger text-lg cursor-pointer">
                            <BsTrash3 color="danger" size={16} />
                          </span>
                        </Tooltip>
                      </div>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create a **Table** component with a **TableBody** containing multiple **TableRow** components.
2. Inside each **TableRow**, include a **Switch** component.
3. Set the **isDisabled** prop of the **Switch** based on a state variable that changes (e.g., upon clicking a button outside the table).
4. Observe that the **Switch** does not respect the **isDisabled** state while inside the **Table**.
5. Place the same **Switch** component outside the Table and observe that it respects the **isDisabled** state.

Expected behavior

The Switch component should consistently respect the isDisabled property, regardless of whether it is placed inside or outside of the Table component. The expected behavior is that the switch becomes disabled/enabled based on the state provided to isDisabled.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-843 [BUG] - "Switch Component `isDisabled` Prop Not Working When Inside Table Component

[wingkwong]

@Hashim1995 Have you tried the latest version? There're quite lots of changes between 2.2.9 and the latest.

[Hashim1995]

@Hashim1995 Have you tried the latest version? There're quite lots of changes between 2.2.9 and the latest.

@wingkwong Yes, I updated to the latest version but the problem is still not solved.

[wingkwong]

@Hashim1995 thanks for confirmation. I'll have a look later.

[wingkwong]

@Hashim1995 Can you provide a minimal reproducible environment on stackblitz? A video for demonstration would be appreciate. When I trigger handleSwitchChange by either clicking button outside table or clicking switch inside table, toggleLoading will be set as true, and at the end it will be set as false. In between I can see the switch is disabled.

clicking button outside table

clicking switch inside table

[Hashim1995]

@wingkwong, thank you for your feedback. I've located a Stackblitz repository that utilizes nextui; unfortunately, I wasn't able to bootstrap a new Stackblitz repo specifically for next.ui. Although the repository is based on Next.js, which I do not use, the issue persists across frameworks. The main problem I'm encountering is with the isDisabled prop of the Switch component. It functions correctly outside of a table but fails to work when placed inside a table. I would appreciate it if you could review the code and provide any insights you might have

Stackblitz repo

[wingkwong]

@Hashim1995 Thanks for the reproducible example. I could see the problem there. However, I copied your code in Stackblitz and tried it on my local storybook. This is the result and somehow it's working fine. Therefore, I'd put this issue on hold first and retry after the next release (scheduled on 20th May).

issue3012-demo.webm

[Hashim1995]

@wingkwong Thanks! It seems like a version error (but i tried different versions), perhaps a conflict with other packages. It looks like a really weird problem :)

[wingkwong]

Closing - please use the latest version (v2.4.0)