Sidebar collapses unwantedly, when chosing an option from an angular dropdown.

[Jonas Czeslik]

Hello Syncfusion team, 

i am curently working on a sidebar component that contains several setting dialogs, which are put into angular accordions. Each accordion can be accessed and reveals buttons, checkboxes and dropdown menus. I activated the closeOnDocument flag, since I think that this is an important feature. When I then press a button or (un)tick a checkbox, everything works fine, but chosing a dropdown option results in the sidebar collapsing. 
Setting the closeOnDocument flag to false and adding a "Close Sidebar" button is my current workaround, but as I mentioned, I would like to keep the closeOnDocument feature. 
Is there a way to avoid the collapse due to the dropdown? And why is it even happening? Since the dropdown is a child nested in the sidebar, shouldnt the sidebar visibility be unaffected by it? 

Kind regards,

Jonas Czeslik

[Sowmiya Padmanaban]

Hi  Jonas Czeslik,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with Sidebar component (sidebar collapse on clicking the item in dropdown list ). By default, the closeonDocumentClick property will close the Sidebar element whenever the click on the document (outside of the Sidebar element). The DropDownList popup element will be append outside the Sidebar element in DOM(within body tag instead of sidebar element). So, in the popup element interactions (click, mousedown) the closeonDocumentClick will trigger and close the sidebar. 

 

In your application, you can add one common class to the all elements in which you want to prevent closing of Sidebar by using cssClass property. Based on that class you can prevent the Sidebar close action by using close event. 

 

Please, refer the below code snippet. 

 

 <ejs-sidebar 

        id="default-sidebar" 

        #sidebar 

        [closeOnDocumentClick]="true" 

        (close)="onClose($event)" 

      > 

        <div class="title-header"> 

          <div style="display:inline-block">Sidebar</div> 

          <span id="close" class="e-icons" (click)="closeClick()"></span> 

        </div> 

        <div class="sub-title"> 

          Place your primary content here. 

          <ejs-dropdownlist 

            id="games" 

            #sample 

            [dataSource]="sportsData" 

            [cssClass]="cssClass" 

            [fields]="fields" 

          ></ejs-dropdownlist> 

        </div> 

      </ejs-sidebar> 

 public cssClass: string = "custom_class"; 

  onClose(args) { 

    if (document.activeElement.classList.contains("custom_class")) { 

      args.cancel = true; 

    } 

  } 

 

Please, refer the below sample link. 

 

https://stackblitz.com/edit/angular-dzcha5-fapyxv?file=app.component.ts 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Jonas Czeslik]

Thanks both for the explanation and the workaround. Works perfectly fine!

[Sowmiya Padmanaban]

Hi Jonas,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P