FormDialog problem showing data in select input

[FlopiVG]

Describe the bug
I have a problem when render a FormDialog modal (i think its the same for all modals) when put a Select Input inside of it and display the data the info show inside of modal and I have to scroll down to see the values.

I try to hardcode .dialog-styles-mod_dialog-content__{dinamic} class with overflow: visibleand work as spected.

To Reproduce

1. Create a FormDialog
2. Put as children an input field.
3. Display the values and you can see it inside of modal and had to scroll down.

Expected behavior
See the dropdown values in front of modal.

Screenshots

[montezume]

Thanks for reporting this! I can take it 🤓

[emmenko]

We can't use overflow: visible because it breaks the normal content overflow.

We need to find another solution

[emmenko]

This seems to be a known issue with react-select.

• positioning the component in containers that have overflow: scroll; JedWatson/react-select#810
• [Dialog] overflow property cause issue with react-select control mui/material-ui#7431

@montezume is looking into an advanced configuration of react-select, to render the menu into a different portal (https://react-select.com/advanced#portaling).

[montezume]

I have a pull request open in ui-kit, 682 to help with this problem. Once that's merged and released, we can render select-inputs and fields inside of a portal, and that should solve this problem.

[emmenko]

@montezume I guess this is now fixed, right?

[montezume]

As long as users are using menuPortalTarget yes