1. Home
  2. Forum
  3. Angular - EJ 2
  4. closeOnDocumentClick and modal dialogs

closeOnDocumentClick and modal dialogs

We have an application that instantiates ejs-sidebar as shown below:

<ejs-sidebar #mainSidebar class="menu-sidebar-large" showBackdrop="true" closeOnDocumentClick="true" width="1160">
    <div></div>
</ejs-sidebar>

Within the sidebar, we have an ejs-grid control with a toolbar whose click event launches a modal ejs-dialog containing a form. When clicking on any object in the modal dialog, the sidebar will automatically close. Since we're dealing with a modal, shouldn't any interaction events outside the dialog be ignored? We would expect the sidebar to remain open.

Please advise.

Jon


1 Reply
SP Sowmiya Padmanaban Syncfusion Team April 30, 2020 11:43 AM UTC

Hi Jon,  
 
Greetings from Syncfusion support. 
 
We have validated your requirement. When enabling the closeOnDocumentClick property,  it closes the sidebar component when click anywhere in the document element. In your scenario, when you perform any action (click) inside the model dialog, it consider the dialog element as part of the document and triggers the close event of Sidebar component.  To resolve your problem, you can check the target element which triggered the close event is dialog element or not and based on this condition, you can prevent the sidebar from closing. 
 
Refer the below code snippet. 
 onClose(args) { 
    if(args.event.target.closest(".e-dialog")) { 
      args.cancel =true; 
    } 
 
Refer the sample link below. 
 
Another Solution: 
 
Also, disabling the CloseOnDocumentClick property , it prevents the sidebar from closing when click outside the sidebar component.  
 
Refer the below code snippet. 
 <ejs-sidebar id="default-sidebar" #sidebar [closeOnDocumentClick]="false"> 
  </ejs-sidebar> 
 
Refer the below link to know more about the Sidebar component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 



Loader.
Up arrow icon