Prevent Popup close on ESC key

Prevent Popup close on ESC key

Posted by: ankita on 6 July 2018, 3:31 pm EST

• 

  ankita

  • Post Options:
  • Link
    Copy

  Posted 6 July 2018, 3:31 pm EST

  Hi,

  This is the code I am using for Wijmo 5 for popup:
  
  PopupContainer = new wijmo.input.Popup(“#AuthentaticationPoup”);
  
  PopupContainer.show(true, function (e) { });

  When I press escape its closing the popup. How to prevent popup close.
  
  I also tried hideTrigger =“none”

  Also, below is the Wijmo 3 code which I used for other project. I need similar feature in Wijmo 5

  $(“#div1”).wijdialog({
  
  position: [‘auto’, ‘auto’],
  
  title: “Reconcile Account”,
  
  close: function (e) {
  
  alert(“This popup clise fire”);
  
  }
  
  });

  Thanks,
  
  Ankita

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 July 2018, 7:20 am EST

  Hi Ankita,
  
  To prevent the popup from hiding on esc key press you can handle keydown event for hostElement and call preventDafault if the keypressed is ‘Esc’ key.
  
  Please refer to following code snippet:-

  wjPopup.hostElement.addEventListener('keydown',(e)=>{
  	if(e.keyCode==wijmo.Key.Escape){
  		e.preventDefault();
  	}
  },true);
  

  You can also refer to following sample which implements the same:-
  
  https://stackblitz.com/edit/js-xwczlv?file=index.js

  ~Manish

• 

  ankita

  • Post Options:
  • Link
    Copy

  Posted 9 July 2018, 9:26 am EST

  Hi Manish,

  Thanks for the prompt response.
  
  I tried with your example, its working only when input field is in focus. I if click popup header or other than the input field and then press escape , the popup closes. I need this for login application so it should not close even if i click anywhere on the screen.

  Thanks,
  
  Ankita

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2018, 2:41 am EST

  Hi,

  If you want the popup to close only programmatically, then you can handle the hiding event and cancel the popup hiding event to prevent popup from hiding.

  Please refer to following code snippet:-

  /*Prevent popup from hiding*/
  
  wjPopup.hiding.addHandler(preventHide);
  
  /* hide popup */
  
  wjPopup.hiding.removeHandler(preventHide);
  
  wjPopup.hide('some optional dialog result');
  
  /* prevent hide function */
  
  function preventHide(s,e){
  
  	e.cancel=true;
  
  }
  

  You may also refer to the following sample which implements the same:-

  https://stackblitz.com/edit/js-4jgfhx?file=index.js

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2018, 2:41 am EST

  Hi,

  If you want the popup to close only programmatically, then you can handle the hiding event and cancel the popup hiding event to prevent popup from hiding.

  Please refer to following code snippet:-

  /*Prevent popup from hiding*/
  
  wjPopup.hiding.addHandler(preventHide);
  
  /* hide popup */
  
  wjPopup.hiding.removeHandler(preventHide);
  
  wjPopup.hide('some optional dialog result');
  
  /* prevent hide function */
  
  function preventHide(s,e){
  
  	e.cancel=true;
  
  }
  

  You may also refer to the following sample which implements the same:-

  https://stackblitz.com/edit/js-4jgfhx?file=index.js

  ~Manish

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 10 July 2018, 2:41 am EST

  Hi,

  If you want the popup to close only programmatically, then you can handle the hiding event and cancel the popup hiding event to prevent popup from hiding.

  Please refer to following code snippet:-

  /*Prevent popup from hiding*/
  
  wjPopup.hiding.addHandler(preventHide);
  
  /* hide popup */
  
  wjPopup.hiding.removeHandler(preventHide);
  
  wjPopup.hide('some optional dialog result');
  
  /* prevent hide function */
  
  function preventHide(s,e){
  
  	e.cancel=true;
  
  }
  

  You may also refer to the following sample which implements the same:-

  https://stackblitz.com/edit/js-4jgfhx?file=index.js

  ~Manish