Datepicker popup shows content behind it

[Christopher Heard]

The popup for the datepicker has a small band around the calendar that shows the content that should be hidden behind it. This first image shows the datepicker closed

This is the open datepicker, where the labels are bleeding through the calendar wrapper.




I already tried adjusting the z-value of the popup, but it doesn't not work and the bleed through still occurs.

[YuvanShankar Arunagiri]

Hi Christopher,

We have reviewed the issue you reported with the DatePicker component. Based on the screenshot you provided, we created a sample where the DatePicker is placed within a SideBar component. However, our testing, the calendar popup opens correctly and overlays other elements as expected.

For your reference, we’ve included a video demonstration and the sample project we used for testing.

We kindly request you to review the shared sample and, if the issue persists on your end, please modify the sample to replicate the problem. Additionally, sharing a video demonstration of the issue would help us better understand the scenario.

We also suspect that the issue might be related to custom style overrides in your application. Please check if any CSS rules might be affecting the popup behavior.

Regards,

YuvanShankar A

Attachment: sidebardatepicker_b8e484b8.zip

[Christopher Heard]

Your code is incorrect. You need the CloseOnDocumentClick="true"

<SfSidebar @ref="sidebarObj" CloseOnDocumentClick="true" ShowBackdrop="true" Width="300px" @bind-IsOpen="SidebarToggle">

    <ChildContent>
        <div style="text-align: center;" class="text-content">
            <span>Sidebar</span>
            <SfDatePicker TValue="DateTime?" Placeholder='Choose a Date'></SfDatePicker>
            <span>
                <SfButton @onclick="Close" CssClass="e-btn close-btn">Close Sidebar</SfButton>
            </span>
        </div>
    </ChildContent>
</SfSidebar>

Now open the calendar and click on any date. Observe that the sidebar closes

Attachment: SyncfusionBug_d7e7e42d.gif

[YuvanShankar Arunagiri]

Hi Christopher,

Query: Now open the calendar and click on any date. Observe that the sidebar closes?

Yes, we were able to reproduce the issue on our end. Based on the architecture of the DatePicker component, the popup is created and appended to the body element to ensure proper positioning. And, in the Sidebar component, clicking outside of sidebar parent element triggers the sidebar to close this is the intended behavior of the component.

To resolve this type of issue, we recommend referring to the following forum post for a detailed explanation and potential solutions

Forum link: https://www.syncfusion.com/forums/197168/sidebar-with-closeondocumentclick-closes-when-it-shouldnt

Please review the above suggestions and let us know if you need any further assistance.

Regards,

YuvanShankar A