[Bug]: DataGrid: Clicking on Button in a cell also changes selection

[eddieleem]

Component

DataGrid

Package version

9.56

React version

18

Environment

npmPackages:
    @fluentui/react-components: ^9.56.0 => 9.56.0 
    @types/react: ^18 => 18.3.12 
    @types/react-dom: ^18 => 18.3.1 
    react: ^18 => 18.3.1 
    react-dom: ^18 => 18.3.1 

Current Behavior

Clicking on a button or checkbox in a cell also changes the DataGrid selection.

Expected Behavior

Clicking on a button or checkbox in a cell must not change the DataGrid selection

Reproduction

https://react.fluentui.dev/?path=/docs/components-datagrid--docs

Steps to reproduce

1. Go to https://react.fluentui.dev/?path=/docs/components-datagrid--docs
2. Go to 'Focusable Elements In Cells' section
3. There are buttons for a selectable DataGrid
4. Click on any buttons

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[khmakoto]

@eddieleem this is easily solved by stopping propagation on click of the button, but I agree that this should be added to the example, so I'll raise a PR to add that information.

[eddieleem]

@khmakoto Thank you. You are right.
I've checked again and I confirm stopPropagation worked like a charm for Button and is not a bug for DataGrid.

However, I found that stopPropagation does not work with Checkbox or ToggleButton.

Using stopPropagation affected the actual function of Checkbox and ToggleButton, meaning it stopped changing the selection for DataGrid but that made checkbox uncheckable.

It's a bug of Checkbox and ToggleButton. I will open another issue.

[eddieleem]

Interesting...
It's not a bug of Checkbox or ToggleButton but this behavior only happens when Checkbox or ToggleButton are used within DataGrid.

with stopPropagation, Checkbox does not toggle.

    createTableColumn<SortItem>({
      columnId: "distinct",
      renderHeaderCell: () => {
        return "Distinct";
      },
      renderCell: (item) => {
        return (
          <>
            <Checkbox checked={item.distinct.distinct}
              onChange={(ev) => {
                item.distinct.distinct = ev.target.checked;
              }}
              onClick={(ev) => ev.stopPropagation()}
            />
          </>
        );
      },
    }),

Screen.Recording.2024-11-13.at.9.43.36.AM.mov

[eddieleem]

Here is the bypass of the problem.

            <Checkbox checked={item.distinct.distinct}
              onClick={(ev) => {
                ev.stopPropagation();
                item.distinct.distinct = !item.distinct.distinct;
                setSortColumns([...sortColumns]);
              }}
            />