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.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
