1. Home
  2. Forum
  3. Blazor
  4. Sidebar behaves improperly when setting CloseOnDocumentClick="true"

Sidebar behaves improperly when setting CloseOnDocumentClick="true"

Hello,

I'm using the latest Syncfusion v18.2.56
I found that the sidebar behavior has issues when CloseOnDocumentClick="true"

1. In mobile view, actions like swiping on the sidebar get transferred to the layout underneath = not good
2. Selecting a dropdown from within sidebar improperly closes it in both regular and mobile view

I made a gif of the issue below and I attached my project file.



Attachment: SFDataGridTest_18_2_latestVS_a39f99f3.7z

8 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team September 7, 2020 12:48 PM UTC

Hi Sorin,  
 
Greetings from Syncfusion support. 
 
Query1- Swiping on the sidebar get transferred to main-content. 
 
We would like to let you know that your reported problem is not related to the Sidebar component. By default, when the content of the page exceeds the height of the corresponding page, it creates a scrollbar for BODY element to scroll up/down to see the below hidden content of the page. This is the default behaviour. In your attached sample, scrollbar created for the entire page to scroll down and see hidden content. So, when you scroll the page, it moves the entire body element. 
 
Refer the attached video. It is the default behaviour for both Mobile and Desktop. 
 
 
Note: Setting position as fixed will keep the Sidebar fixed in the page, and will scroll with page scroll. Sidebar with position as absolute will allow the Sidebar to scroll along with its main-content element. 
 
Query2 – Selection of DropdownList closes the Sidebar. 
 
By default, the closeonDocumentClick property will close the Sidebar element whenever the click action will be triggered outside of the Sidebar element. The DropDownList popup element will append to the body element instead of Sidebar element. So, when interacting with popup element of DropDownList (click, mousedown), close event of Sidebar will trigger based on the closeonDocumentClick property’s functionality. 
  
To resolve your problem, you can add custom CSS class to the dropdown list using cssClass property by checking the active document element in the close event of the Sidebar component. Then using that class you can restrict the Sidebar from closing using its close event’s argument (cancel) if the custom CSS class is present in the active element as shown in the below code snippet. 
 
<SfDropDownList CssClass="custom_class" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData"> 
            <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings> 
        </SfDropDownList>  
 public async Task Close(Syncfusion.Blazor.Navigations.EventArgs args) 
    { 
        // check the clicked target is dropdownlist or not using JS interop  
        var dropdownList_element = await JSRuntime.InvokeAsync<int>("Sidebar"); 
        if (dropdownList_element == 0) 
        { 
            // If the elmeent is dropdownlist. cancel the close event. 
            args.Cancel = true; 
        } 
        else 
        { 
            args.Cancel = false; 
        } 
    } 
 
Index.html 
 
<script> 
        function Sidebar() { 
            if (document.activeElement.classList.contains("custom_class")) { 
                var index = 0; 
            } 
            else { 
                var index = 1; 
            } 
            return index; 
        } 
    </script> 
 
Refer the sample link below. 
 
 
To know more about Sidebar component, please refer the below links.   
 
UG Documentation 
 
Demo link 
 
API reference  
  
   
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
BE ben.iffland May 10, 2023 10:29 PM UTC

Surely this is a bug with the way that the sidebar works and needs to be fixed rather than people having to add this hack?


BE ben.iffland May 11, 2023 04:00 AM UTC

Can you please demonstrate how to achieve this same result when using a MudSelect instead of an  SfDropDownList ?


IL Indhumathy Loganathan Syncfusion Team May 11, 2023 12:38 PM UTC

Hi Ben,


The CloseonDocumentClick property is used to collapse the Sidebar when you perform click on the Main content area. The Dropdown List popup element directly renders within the DOM body due to this Sidebar getting collapsed when you perform a click within the popup.


However, this collapse action doesn't trigger on other components that are directly rendered within the Sidebar instead of the body. So to avoid this specific popup-related issue, we suggest you cancel the Sidebar collapsing. You can avoid similar popup openings just by mentioning the common "popup" class name within the Close event.


Regards,

Indhumathy L


BE ben.iffland May 11, 2023 07:50 PM UTC

Yes I am trying to prevent the close when using a MudSelect inside the Sidebar. I am not using the  SfDropDownList.

The above example does not seem to work for the MudSelect. 


IL Indhumathy Loganathan Syncfusion Team May 12, 2023 12:30 PM UTC

Ben, are you able to get the document.activeElement within the index.html file through an interop call? Share with us the exact element you are getting while performing MudSelect. Based on the shared details, we will further validate them at our end.


BE ben.iffland May 14, 2023 08:28 PM UTC

The above demonstartion zip file does not work if you upgrade to the latest version of the Syncfusion Sidebar. There is no longer a this.SideBarRight.Toggle() method on the Sidebar.


LD LeoLavanya Dhanaraj Syncfusion Team May 17, 2023 05:16 PM UTC

Ben, Based on your requirements, we have prepared and included the Sidebar sample in the latest version. Our previously attached sample was in the old version (18.2.56), and we have updated some of properties, methods and events in the Sidebar component from that old version.


Refer the below links to know more about our Blazor Sidebar component.


Demo : https://blazor.syncfusion.com/demos/sidebar/default-functionalities/


Documentation : https://blazor.syncfusion.com/documentation/sidebar/getting-started


API : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html


Also, Check out the sample and get back to us if you need any further assistance.


Attachment: SidebarWASM_3c10e175.zip

Loader.
Up arrow icon