Sidebar with CloseOnDocumentClick closes when it shouldn't

[Christopher Heard]

If you create a Sidebar component on a page with the CloseOnDocumentClick property and within that sidebar have a SfDatepicker component. When the datepicker popout displays, if you select a day within the datepicker, the Sidebar closes even though the child component is within that sidebar.

All of my other buttons and input boxes work without closing the sidebar, but only clicking the datepicker popout closes the sidebar. The popout div is created in the document outside of the sidebar causing the document to think the popout is not a child component and closing the document. Inspecting the HTML of the page shows the popout div being inserted at the bottom of the page rather than within the sidebar compo

<SfSidebar @bind-IsOpen="showSlide"
           Width="600px"
           Position="SidebarPosition.Right"
           CloseOnDocumentClick
           Type="SidebarType.Slide">
  <ChildContent>
    <SfDatePicker OpenOnFocus ID="add-appointment-date-picker" Min="@(DateTime.Today)" TValue="DateTime?" Value="selectedDate" Format="MMM dd, yyyy" />
  </ChildContent>
</SfSidebar>

[LeoLavanya Dhanaraj]

Hi Christopher,

Greetings from Syncfusion support.

We would like to inform you that the closeonDocumentClick property will close the Sidebar element whenever the click action will be triggered outside of the Sidebar element. However, the DatePicker popup element will append to the body element instead of Sidebar element. So, when interacting with popup element of DatePicker, the close event of Sidebar will trigger based on the closeonDocumentClick property’s functionality. 

  

To overcome this scenario, you can check the current active document element in the Close event of the Sidebar component. Then using that proper component element using the selector, you can restrict the Sidebar from closing using its close event’s argument (cancel).

Refer the below mentioned code snippets and sample for further references.

[MainLayout.razor]

<SfSidebar Width="600px" @bind-IsOpen="SidebarToggle" CloseOnDocumentClick Position="SidebarPosition.Right"

           Type="SidebarType.Slide" OnClose="@SidebarClosed">

    <ChildContent>

        <div style="text-align: center;" class="text-content">

            <span>Sidebar</span>

            <SfDatePicker OpenOnFocus ID="add-appointment-date-picker" Min="@(DateTime.Today)" TValue="DateTime?" Format="MMM dd, yyyy" />

            <span>

                <SfButton @onclick="Close" CssClass="e-btn close-btn">Close Sidebar</SfButton>

            </span>

        </div>

    </ChildContent>

</SfSidebar>

 

<div class="text-content" style="text-align: center;">

    <div>Main content</div>

    <div>

        <SfButton @onclick="Toggle" IsToggle="true" CssClass="e-btn e-info">Toggle Sidebar</SfButton>

    </div>

</div>

 

@code {

    public bool SidebarToggle = false;

    public void Close()

    {

        SidebarToggle = false;

    }

    public void Toggle()

    {

        SidebarToggle = !SidebarToggle;

    }

    public async Task SidebarClosed(Syncfusion.Blazor.Navigations.EventArgs args)

    {

        var datePick = await JSRuntime.InvokeAsync<int>("Sidebar");

        if (datePick == 0)

        {

            args.Cancel = true;

        }

        else

        {

            args.Cancel = false;

        }

    }

}

 

[App.razor]

<script>

        function Sidebar() {

            if (document.activeElement.classList.contains("e-datepicker")) {

                var index = 0;

            }

            else {

                var index = 1;

            }

            return index;

        }

</script>

Refer the shared details and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: BlazorApp_43c8df4d.zip