[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]

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 #3681