Date picker not working in html <dialog> elements

[robertmusil]

Description

If you use <vaadin-date-picker> in <dialog> element (which uses showModal()), the dialog content is rendered in #top-layer, the vaadin though moves the overlay into the body: vaadin-overlay-mixin,js - _attachOverlay

This makes it so the component cannot be interacted in any way, and its programmatically impossible to bring it to front.

Expected outcome

I would expect being able not to render date picker in a "portal" inside of the body, but kept inside of the context of my
parent element

Minimal reproducible example

https://studio.webcomponents.dev/edit/pK6NkgWGpVfKynFGC38n/src/index.js?p=website

<dialog id="dialog">
      <vaadin-date-picker></vaadin-date-picker>
</dialog>

<script>
import '@vaadin/date-picker/vaadin-date-picker.js';

document.getElementById('dialog').showModal()
</script>

Steps to reproduce

1. Click on date picker
2. Date picker cannot be interacted with

Environment

Vaadin version(s): v24.3.8
OS: Any

Browsers

Issue is not browser related

[web-padawan]

Thanks for the issue. Here's the related ticket for vaadin-select: #6325