How to prevent Sidebar closing when closeOnDocumentClick is true in JavaScript SideBar?

Using JavaScript Navigation closeOnDocumentClick property will close the Sidebar element whenever a click is made on the document (outside the Sidebar element). For example, while rendering the  DropDownList within Sidebar, the DropDownList popup element will be appended outside the Sidebar element in DOM (within body tag instead of Sidebar element). So, with the popup element interactions (click, mouse down) the closeOnDocumentClick will trigger and close the sidebar.  

 Sidebar close action can be prevented by setting the args.cancel property as true in close event. In the following sample, the closing action for the Dropdown Tree popup is prevented based on the target class.

<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"  
            [fields]="fields"  
          ></ejs-dropdownlist>  
        </div>  
      </ejs-sidebar>  
 public cssClass: string = "custom_class";  
  onClose(args) {  
    if (args.event.target.classList.contains(‘e-list-item’)){  
      args.cancel = true;  
    }  
  } 

Refer to the sample link: Sample

Refer to the API link: https://ej2.syncfusion.com/angular/documentation/api/sidebar/#close

Conclusion
I hope you enjoyed learning about how to prevent Sidebar closing when closeOnDocumentClick is true in JavaScript SideBar.

You can refer to our JavaScript Navigation feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Navigation example to understand how to create and manipulate data.

For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-trac, or feedback portal. We are always happy to assist you!