Keeping the background clickable with Dialog open

[scottwillman]

Is it possible to make background elements clickable while a dialog is open? I have a table with clickable rows that open a drawer. I want the user to keep clicking rows to change the drawer data. I disabled the onClose behavior, but the background is still un-clickable. I think this is because it renders full screen and in a portal, but I’m not sure.

<Dialog
    transition
    open={isOpen}
    onClose={() => null}
    className="relative z-10"
>
    <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full p-4">
        <DialogPanel transition className="pointer-events-auto flex h-full flex-col overflow-x-hidden overflow-y-scroll bg-white rounded-2xl border border-zinc-200 shadow-2xl w-full max-w-2xl transition-all data-[closed]:scale-95 data-[closed]:opacity-0 data-[enter]:duration-200 data-[enter]:ease-out data-[leave]:duration-200 data-[leave]:ease-in">
            {/* Header */}
            <div className="border-b border-zinc-200 px-4 py-4 sm:px-6">
              ...etc

Alternatively, it seems a Popover might be more suited for this, but it's not a controlled component that I can trigger opening outside of the PopoverButton.

Any ideas on how I should approach this? Thank you!

[scottwillman]

Solved. It makes sense in hindsight that the Dialog's specific reason for existing is accessibility and background/scroll locking. What I really needed was to just transition my own div because I didn't need the functionality of the Popover or Dialog. All works great now!

<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full p-4">
    <Transition show={isOpen}>
        <div className="pointer-events-auto flex h-full flex-col overflow-x-hidden overflow-y-scroll bg-white rounded-2xl border border-zinc-200 shadow-2xl w-[525px] transition-all data-[closed]:translate-x-4 data-[closed]:opacity-0 data-[enter]:duration-200 data-[enter]:ease-out data-[leave]:duration-200 data-[leave]:ease-in">
            {/* Header */}
            <div className="border-b border-zinc-200 px-4 py-4 sm:px-6">
                <div className="flex items-center justify-between gap-4">
                      etc...