[Bug]: Table component selection get triggered on clicking on Dialog anywhere

[maheshkumawat24]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 23.82 GB / 63.73 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/p/sandbox/aged-hill-3dsxwh

Bug Description

Actual Behavior

I have a Table component with Multi select, it has a column which renders button for every row. On clicking of the Button It opens a Dialog. Whenever I click on the dialog anywhere it select and unselect Table selection.

Expected Behavior

Clicking on the dialog should not impact Table selection.

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

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

[khmakoto]

Hey @maheshkumawat24, thanks for filing this issue! I think this is happening because in your render function Dialog is a child of TableRow. There are two ways in which you can stop fix this, one is to stop propagation on click of the Dialog like I've done in this modified codesandbox, but that still leaves clicking the backdrop to soft close the dialog a potential issue. The other more involved solution, but more correct in my opinion, is to separate the Dialog from the Trigger so that the trigger renders within the TableRow but the dialog renders outside of it, and thus doesn't trigger the TableRow's onClick. I've done that in this other codesandbox.

One of those 2 approaches should work for you, let me know if you need anything else 😄.

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!