Scrolling long content outside body not working

[emamoshin]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v1.4.3

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/divine-dream-b2mrd

Describe your issue

When I try to scroll outside of the dialog body, the scroll doesn't work. However, if you scroll inside the body, it works. Image example - https://prnt.sc/26g59lm

[dninomiya]

In my case this solved it.

  <Dialog
      open={isOpen}
      onClose={() => setIsOpen(false)}
      className="fixed z-10 inset-0 overflow-y-auto"
    >
      <div className="flex items-center justify-center min-h-screen">
        <Dialog.Overlay className="fixed inset-0 bg-black opacity-30" />

        <div className="relative bg-white rounded max-w-sm mx-auto">
          <Dialog.Title>Complete your order</Dialog.Title>

          {/* ... */}
        </div>
      </div>
    </Dialog>

to

  <Dialog
      open={isOpen}
      onClose={() => setIsOpen(false)}
      className="fixed z-10 inset-0 overflow-y-auto"
    >
      {/* change wrapper to Dialog.Overlay as div */}
      <Dialog.Overlay as="div" className="flex items-center justify-center min-h-screen">
        {/* add pointer-events-none */}
        <div className="fixed inset-0 bg-black opacity-30 pointer-events-none" />

        <div className="relative bg-white rounded max-w-sm mx-auto">
          <Dialog.Title>Complete your order</Dialog.Title>

          {/* ... */}
        </div>
      </Dialog.Overlay>
    </Dialog>

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1333, and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.

However, in order to make it work properly, you have to update the Dialog.Overlay with Dialog.Backdrop. In addition, you have to mark your panel with your contents by wrapping it in a Dialog.Panel. In your case I swapped the div out with a Dialog.Panel.

Here is an updated CodeSandbox that includes the insiders build: https://codesandbox.io/s/lucid-worker-mnugrq?file=/src/App.js

[julioflima]

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed by #1333, and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.

However, in order to make it work properly, you have to update the Dialog.Overlay with Dialog.Backdrop. In addition, you have to mark your panel with your contents by wrapping it in a Dialog.Panel. In your case I swapped the div out with a Dialog.Panel.

Here is an updated CodeSandbox that includes the insiders build: https://codesandbox.io/s/lucid-worker-mnugrq?file=/src/App.js

Perfect my friend, resolved the problem of centralizing the modal. I didn't understood the tricky element. But in fact it's tricky. Thank you!