Date picker component doesn't work well if rendered inside a dropdown

[fabio-d-m]

The date picker component gets rendered via portals and it loses the dom relationship with its parents. In particular scenarios it causes css and js problems like these:

Here we have a date rendered within a dropdown (the z-index is not correct):

If I click on a date, it closes the dropdown and changes the component position:

[matuzalemsteles]

Hmm, thanks @FabioDiegoMastrorilli for bringing this use case, this case is a bit unexpected for us.

@bryceosterhaus maybe with our recent changes to the portal nesting system this might solve the problem? I'm thinking that we may have problems with overflow: hidden from dropdown-menu if I render the date picker as a child of dropdown-menu.

If we do not follow this path we could solve with z-index but still have problems with the clicks outside that close the two elements. Maybe we have to create some useful component that can wrap elements like this and solve the problems of cliks out for example.

[fabio-d-m]

Hey @matuzalemsteles what about avoiding portals for the date picker?

Modals need it because they completely cover the DOM and prevent any action by design, so inheritance is deliberately undesired.

Here the situation is a bit different: in our scenario we need to keep the DOM structure as is.
Maybe (probably) I'm missing some use cases but I don't see real advantages using portals

[jbalsas]

Hey @FabioDiegoMastrorilli, portals are in general needed for components that don't affect layout out of the box and create some type of overlay (tooltips, popovers, modals...).

As @matuzalemsteles said, containers can have overflow: hidden or fixed dimensions that would make a component bigger than the container either to get cut/inaccessible or to create inner srcrollings. In the case the overlays change dimensions, it can also easily cause alignment issues when dimensions change.

[bryceosterhaus]

I believe this should be fixed by #2277. I just tested locally by nesting a date-picker in dropdown and seems to work fine.

[bryceosterhaus]

See demo of it working here, https://5d5b0f04c42ec0b1281970cb--relaxed-ptolemy-6978dd.netlify.com/?path=/story/claydropdown--date-picker-in-dropdown

[matuzalemsteles]

This is great it seems to work fine but we still have the problem of DropDown closing when interacting with the date picker.

[bryceosterhaus]

the problem of DropDown closing when interacting with the date picker.

Ah, I didn't see that part. Yeah thats definitely an issue.