Avoid closing the dialog on enter press

Question

How can I avoid the edit cards dialog close when I press enter? I have a checklist control that adds items with enter key and it is closing the dialog.

Balasubramanian Sattanathan · Accepted Answer

Hi Renan, 

Thanks for the reply. 

We have validated your requirement at our end and modified the changes in the below sample. In the below sample, the dialog will not close when we press Enter key. And we can save/close the dialog by using the dialog buttons manually. Also we let you know that we can close the dialog by using the closeDialog public method of Kanban. 

https://codesandbox.io/s/kanban-dialog-window-forked-9lq3m  





onDialogOpen: function (args) { 
  let kanbanObj = this.$refs.KanbanObj.ej2Instances; 
  if (args.requestType === "Edit") { 
    let dialogObj = args.element.ej2_instances[0]; 
    dialogObj.keyDown = this.onEnterKeyPressed.bind(this); 
    dialogObj.dataBind(); 
  } 
}, 
onEnterKeyPressed: function (args) { 
  if (args.key === "Enter") { 
    // It will be triggered when press the Enter key 
    isEnter = true; 
  } 
}, 
onDialogClose: function (args) { 
  let activeElement = 
    document.activeElement.classList.contains("e-dialog-edit") || 
    document.activeElement.classList.contains("e-dialog-delete") || 
    document.activeElement.classList.contains("e-dialog-cancel") || 
    document.activeElement.classList.contains("e-dlg-closeicon-btn"); 
  if (!activeElement && args.requestType === "Edit" && isEnter) { 
    // To prevent the event editor from closing 
    args.cancel = true; 
    isEnter = false; 
  } 
}, 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 
Balasubramanian S

Balasubramanian Sattanathan · Answer

Hi Renan, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and let you know that we can prevent the dialog from its closing when pressing the Enter button by using the dialogClose event. In the below sample, we have prevented the dialog from its closing if the active element is the checkbox. And also we would suggest you to use SPACE key for check/uncheck the CheckBox component. 

https://codesandbox.io/s/kanban-dialog-window-forked-50d06?file=/src/App.vue 





onDialogClose: function (args) { 
  if (document.activeElement.type  === "checkbox") { 
    // To prevent the event editor from closing 
    args.cancel = true; 
  } 
} 

Kindly try the above solution and let us know if this comes close to your requirement. 

Regards, 
Balasubramanian S

Renan Monteiro da Silva · Answer

Balasubramanian, thanks for your reply. Unfortunately, that solution doesn't works for me. I can't get that document.activeElement, because I need to submit a form with my enter key, so the active element won't be a checkbox. There are any way to close the dialog by an event? so I can block closing and make close button works manually.