Dialog: Best practices for controlling externally

[reeddunkle]

I have a data table with a reasonably large number of rows. Each row has a column of actions (buttons) that can be performed on that row, like "Edit", "Delete". These actions open Dialog (or AlertDialog) components.

Rather than rendering each button as a <Dialog.Root /> with a <Dialog.Trigger />, I have one Dialog rendered in the data table, and each rows' action buttons control the opening and closing, and provide the necessary data.

A row's action button changes state in the data table, and this state controls whether the Dialog is open or closed.

Rather than using the open prop, I'm conditionally rendering a different dialog component depending on what type of action the user initiated. "Delete" uses an AlertDialog; "Edit" uses a Dialog with a form. This is primarily to make the TypeScript easier to manage, but in theory I can change things to instead use the open prop.

I have a few questions and concerns with this approach. I'm hoping someone here can help me?

• Is there a way to link an external Dialog.Trigger to a Dialog.Root without nesting it as a child?
  • Should I programatically fire an onClick on the Dialog.Trigger when my external button is clicked using a React ref?
  • Are there any extra things to look out for if doing this?
• Conditionally rendering probably prevents a screen reader from properly announcing when the dialog opens and closes?
• With the current pattern, should I use the defaultOpen prop instead of open?
  • defaultOpen tooltip in docs say "The open state of the dialog when it is initially rendered. Use when you do not need to control its open state." This sounds like what I would use when conditionally rendering the Dialog component. But I do "need to control its open state". I'm a bit confused.

Any help, thoughts, or resources are appreciated.

---

I searched through the already existing discussions and didn't see anything discussing what I'm looking for.

• This discussion has a related title, but doesn't cover the same questions that I'm pursuing: Use of Dialog (controlled) without Dialog.Trigger? #1234

[reeddunkle]

I decided to change the architecture to accommodate the intended use of having the Trigger as a child of the Dialog and controlled from within. The accessibility wins are better than the React model wins.

Also, for what it's worth, I used a state machine to enforce the idea of only one dialog being active at a time, to still give the parent control over the children Dialogs.

Closing this.

[djm158]

Interested in this, I'm running into the exact same problem. Didn't want each of my table rows to render a Dialog inside of their action buttons. Is that what you ended up doing?