[BUG] - Inputs inside selectable table row cannot be focused

[JoshuaTyler-GitHub]

NextUI Version

2.4.6

Describe the bug

A Table with props selectionMode='single' or selectionMode='multiple' prevents Input components from being clickable.

Instead, the Table row is selected.

If the user clicks within a few pixels of the border of the Input component, they are able to select the Input and type but it also selects the Table row.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Observe the behavior of how the Input versus the Select element when in a Table with selection.

<Table selectionMode={'single'}>
  <TableHeader>
    <TableColumn key={'name'}>{'name'}</TableColumn>
    <TableColumn key={'description'}>{'description'}</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow key={'row1'}>
      <TableCell key={'row1-name'}>
        <span>{'Name'}</span>
      </TableCell>
      <TableCell key={'row1-description'}>
        <Input placeholder={'description'} />
      </TableCell>
    </TableRow>
    <TableRow key={'row2'}>
      <TableCell key={'row2-name'}>
        <span>{'Name'}</span>
      </TableCell>
      <TableCell key={'row2-description'}>
        <Select>
          <SelectItem key={'Option 1'}>{'Option 1'}</SelectItem>
          <SelectItem key={'Option 2'}>{'Option 2'}</SelectItem>
          <SelectItem key={'Option 3'}>{'Option 3'}</SelectItem>
        </Select>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Expected behavior

As a user, I expect the Input component to function similar to the Select element, properly capturing the focus and preventing propagation of the event to Table row selection.

Screenshots or Videos

Operating System Version

• OS: Windows

Browser

Chrome

[linear[bot]]

ENG-1295 [BUG] - Inputs inside selectable table row cannot be focused

[paul-castro]

any solution for this?

[ryo-manba]

Hmm, I can't really think of a use case for this. Wouldn't setting selectionMode="none" be enough?

That being said, if it's absolutely necessary, you can implement it this way to allow focus (but be sure to test as it might have other side effects).

<TableCell key="row1-description">
  <Input
    placeholder="description"
    onPointerDown={(e) => {
      e.stopPropagation();
      e.currentTarget.focus();
    }}
  />
</TableCell>

[JoshuaTyler-GitHub]

Hmm, I can't really think of a use case for this. Wouldn't setting selectionMode="none" be enough?

That being said, if it's absolutely necessary, you can implement it this way to allow focus (but be sure to test as it might have other side effects).

<TableCell key="row1-description">
  <Input
    placeholder="description"
    onPointerDown={(e) => {
      e.stopPropagation();
      e.currentTarget.focus();
    }}
  />
</TableCell>

There are thousands of web interfaces that exist where rows are both selectable and have editable fields. Let's take the NextUI components table of employee information as our example.

In this table, let's say the hypothetical customer requirement is to add an editable inline phone number field. This bug directly prevents you from being able to add that feature.

The suggestion for stopping event propagation has inconsistent behavior due to how the NextUI <Input/> element is wrapped inside a <div/>. Stopping propagation and calling focus() allows the user to select the input field; however, the row may or may not toggle selection depending on where the user clicks within the element. If clicking near the edges of the input, it toggles the row selection. If clicking near the center of the input, it does not toggle the row selection.

[ryo-manba]

It seems that the React Spectrum team is considering addressing this issue. I'll take some time to think about whether we'll handle it ourselves.

[ryo-manba]

Related to https://github.com/nextui-org/nextui/issues/3681

[imwithye]

I want the row and the button inside the row both are clickable. It looks like it is not possible at this moment. Even if I've added e.stopPropagation(); and e.preventDefault(); to the button click event.

I guess it is related to this issue as well.

[imwithye]

I want the row and the button inside the row both are clickable. It looks like it is not possible at this moment. Even if I've added e.stopPropagation(); and e.preventDefault(); to the button click event.

I guess it is related to this issue as well.

At this moment, instead of setting onRowAction to the table, I have to wrapping it to the TableCell as the workaround.

[ASYSTEMS-MGUEY]

Any update on this? This is a very huge blocker

[juandiegotroconis]

Try setting the isKeyboardNavigationDisabled prop on the Table component, worked for me! @ASYSTEMS-MGUEY @imwithye

[jrgarciadev]

@ryo-manba please check

[tartane]

Same issue here, trying to code a Table with Inputs on each row and they are not focusable. any updates on this?

[Kismet333]

Try setting the isKeyboardNavigationDisabled prop on the Table component, worked for me! @ASYSTEMS-MGUEY @imwithye

I tried this and it does not work.

[Kismet333]

I am having the same issue, I would like to be able to use an <Input> within a selectable <Table>

[Harsh9466]

If you're experiencing issues with row deselection when interacting with elements like switches, inputs or buttons inside a table row, you can override the default behavior by utilizing the onRowAction and onCellAction props provided by HeroUI's Table component.

By assigning no-operation functions to these props, you can prevent the default deselection behavior:

<Table onRowAction={() => {}} onCellAction={() => {}} // ...other props />

This approach ensures that interactions within table cells do not inadvertently trigger row deselection.

[Kismet333]

@Harsh9466 Your solution worked and I can type inside Input fields except for spaces. I could not type a space into these <Input> fields inside a selectable table due to them triggering the <Table>'s selection logic. However I was able to fix this by including some handling for when I type spaces into my <Input> element. A handler for onKeyDown is added to prevent spaces from bubbling up and triggering the selection logic for when entering a space:

onKeyDown={(e) => { if (e.code === "Space" || e.key === " ") { e.stopPropagation(); // ✅ Prevent spacebar from bubbling to the Table } }}

Here it is inside an <Input> element

<Input variant="bordered" size="sm" onKeyDown={(e) => { if (e.code === "Space" || e.key === " ") { e.stopPropagation(); // ✅ Prevent spacebar from bubbling to the Table } }} />