reinink
commented
1 year ago Hey! I think adding a section to the Headless UI dialogs documentation about how to render multiple dialogs using nested dialogs would be a good addition. I've made a note for this internally for when we have a moment to tackle this.
That said, I don't agree that the fact that you can't render sibling dialogs at the same time is a "large architectural limitation" of the project. I think you can do anything you need to do with nested dialogs, and I think nested dialogs are the right solution.
While we could provide an escape hatch for people to opt out of the dialog focus trapping, my concern is that this goes against the principles of this project. Our goal with Headless UI is to provide accessible-by-default components, so providing APIs to opt-out of our accessibility features isn't inline with our vision for the project.
Also, based on the discussion in #825, I wouldn't recommend creating a global dialog component instance that can be reused by other components. Rather, we recommend making a component for each specific dialog in your project, and then rendering them in each situation they're needed.
For example, if you have a list of users on a page and you can click a "Delete" button beside each one that opens a confirm delete dialog, don't create a single DeleteUser dialog instance that's shared by all of those buttons, but instead render a separate DeleteUser dialog instance for each delete button (user). This is also what the maintainers of Radix recommend: https://github.com/radix-ui/primitives/issues/1249#issuecomment-1072971306
So basically, instead of doing this:
export default function Users({ users }) {
let [selectedUser, setSelectedUser] = useState(null)
let [showDeleteDialog, setShowDeleteDialog] = useState(false)
function deleteUser(user) {
setSelectedUser(user)
setShowDeleteDialog(true)
}
return (
<main>
<DeleteUser open={showDeleteDialog} user={selectedUser} />
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name}
<button onClick={() => deleteUser(user)}>Delete</button>
</li>
))}
</ul>
</main>
)
}Do something like this instead, where the button/trigger is built directly into the dialog:
export default function Users() {
return (
<main>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.name}
<DeleteUser user={user}>Delete</DeleteUser>
</li>
))}
</ul>
</main>
)
}
sgarcia-dev
clopezpro
Emiliano-Bucci
dmarvasti
Describe your issue
It's been stated before Headless UI does NOT support multiple modals as siblings (requiring users to nest multiple modals instead). And has no plans to add support for this: https://github.com/tailwindlabs/headlessui/issues/825#issuecomment-1058981268
In response to this, the headlessui.com docs on Dialog (Modal) should be updated with a large disclaimer summarizing this large architectural limitation to users. Ideally, with its own dedicated "Multiple modal restrictions" section on the Sidebar to better communicate its importance.
This is especially important to add given the community's largely negative reception of the news. As well as the fact it's largely agreed upon the community that scalable global modal solutions often render them as siblings instead of nested children as Headless UI requires. Which can severely limit Headless UI's Dialog use-cases to smaller web applications where scalability and modal re-use isn't a strong requirement. https://github.com/tailwindlabs/headlessui/issues/825#issuecomment-1080718005