Dropdown panels inside a Dialog aren't attached to Dialog

[VonStroheim]

I'm submitting a ...

[x] bug report
[ ] feature request
[ ] support request

Codesandbox Case
TEST CASE

Current behavior
When rendering Dropdown inside a Dialog, the Dropdown popup panel is not attached to the dialog DOM element, causing it to scroll with the page.

Perhaps not an issue per-se, more like a consequence of "appendTo" that defaults to "body" since 6.2.0, precluding the possibility to avoid the under-the-hood usage of React.createPortal.

Furthermore, it's not possible (to my knowledge) to set "appendTo" pointing to the Dialog DOM element as a workaround before the mount is completed.

Expected behavior
Dropdown panel inside Dialog should be attached to the Dialog DOM element.

Minimal reproduction of the problem with instructions

1. Put a Dropdown inside a Dialog
2. Open the Dialog
3. Open the dropdown and keep the panel open
4. Scroll the page (it must be long enough to be able to scroll)

(see TEST CASE link above)

• PrimeReact version:
  ^6.2.1

• Browser:
  All

[dattebayorob]

Agreed

[mcandu]

Could you try to add blockScroll={true} on Dialog component. Like this, https://codesandbox.io/s/primereact-test-forked-hwrmw.

[VonStroheim]

Could you try to add blockScroll={true} on Dialog component. Like this, https://codesandbox.io/s/primereact-test-forked-hwrmw.

This is indeed an effective workaround.

On a personal note, I prefer to have reasons for blockScroll={true} that are decoupled from having a dropdown in the dialog, as it causes the scrollbar to disappear so the underlying content slightly jumps when the dialog toggles.

[mcandu]

We'll talk about what we can do for scrollbar behaviour as a team.

[lzoostaoo]

This could be a consequence of (#1875)
return ReactDOM.createPortal(element, this.props.appendTo);
in modals

For dorpdown This caused css issues as dialog dont get its styles from parent.

[mertsincan]

Hi,

You can use appendTo="self" property of Dropdown on the next version.

Best Regards,