Enable/Disable keydown/up/press events programmatically

Enable/Disable keydown/up/press events programmatically

Posted by: davide.vago on 11 March 2019, 8:14 pm EST

• 

  davide.vago

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 March 2019, 8:14 pm EST

  Good morning,

  Using SpreadJS I found impossible to unbind the key events even if the cursor and the document.activeElement is outside the generated canvas.

  I would love to hear from you if anyone has a solution.

  I’m using ESC and ENTER keys to focus on a specific area of my user interface but somehow the existing spread sheet capture these events.

  Step to reproduce:

  Create a spread sheet,
  
  Create an input text
  
  Create a window/document listener to focus automatically the input text on ESC (keycode 27)

  Click within the spread sheet (canvas) to edit a cell
  
  Press ESC
  
  Start typing

  Note: SpreadJS capture the input event so rather than typing within the input the text goes within the sheet cell.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 13 March 2019, 4:40 pm EST

  Hi,

  We are able to replicate the issue at our and hence it has been forwarded to the concerned team for further investigation. We will let you know as we get an update on this. Internal tracking id for the issue is 270718.

  Regards

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 13 March 2019, 8:43 pm EST

  Thanks Sharad, please do let me know if you have any updates. I might be able to help on this but the code is minified so it’s basically impossible to track down the issue.

  It seems like the code is attaching a couple of listeners (keydown/keyup) to the window object.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 14 March 2019, 10:21 pm EST

  Hi,

  Please try invoking the workbook.focus(false) in order to let SpreadJS to release focus. Let me know if you are still facing issues.

  Should invoke workbook.focus(false) to let SpreadJS release focus.
  
      window.addEventListener('keydown', function(e){
        if(e.keyCode == 27){
          document.getElementById('inp').focus();
          workbook.focus(false);
          // window['_gcGlobal']['activeElement'] = null;
          e.preventDefault();
        }
      },true);
  

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 21 March 2019, 12:43 am EST

  Thanks for the reply, unfortunately workbook is not defined

  [quote]Uncaught ReferenceError: workbook is not defined
  
  [/quote] and even removing the comment below [quote]workbook.focus(false)
  
  [/quote] doesn’t work.

  Probably this snippet works within the SpreadJS script where the workbook object does exists

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 21 March 2019, 8:46 pm EST

  Here ‘workbook’ refers to the spread instance in your application. So, full code snippet should look as follows:

  var workbook = new GC.Spread.Sheets,Workbook(hostElement);
  
  window.addEventListener('keydown', function(e){
  if(e.keyCode == 27){
  document.getElementById('inp').focus();
  workbook.focus(false);
  // window['_gcGlobal']['activeElement'] = null;
  e.preventDefault();
  }
  },true);
  

  Please let us know if you face any further issues.

  Regards

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 4:35 am EST

  Thanks for the reply

  This snippet seems working, solved the issue

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 22 March 2019, 4:35 am EST

  Thanks for the reply

  This snippet seems working, solved the issue

• 

  davide.vago

  • Post Options:
  • Link
    Copy

  Posted 28 March 2019, 8:19 pm EST

  Apologies for the delayed feedback,

  The snippet worked at the first instance, later on we discovered that fiddling with this Workbox focus the entire spreadsheet instance fall a part, the rendering of the tables explode and the injected data disappear.

  The way to reproduce is:

  • focus on the spreadsheet
  • press ESC to remove the focus from the spreadsheet and focus on other dom elements
  • focus again on the spreadsheet manually
  • press again ESC
• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 31 March 2019, 10:14 pm EST

  Hi,

  We are sorry but we are unable to replicate the issue at our end. Could you please have a look at the attached sample and let us know if we are missing something in order to replicate the issue?

  Regards
  
  spreadDisableKey.zip