3

I have a lightning component that provides it's own hotkeys and those are now overlapping with the new LEX hotkeys released in Summer '17. So pressing 'e' pops open the LEX edit, when i'd like to do something else. Salesforce also kills all propigation so my listener doesn't even get a chance to react. I'd like to disable the LEX hotkeys or better yet find a way to avoid triggering them when my component isRendered().

This is a long shot - I've already dug through the javascript and am pretty sure it's impossible.

Improve this question
1
  • Can confirm its impossible from lightening components, you can do this from Chrome extension or Tampermonkey, this is not a salesforce solution though.
    – Prafulla Patil
    Commented Jul 11, 2017 at 20:05

1 Answer 1

Reset to default
9

Alright - Suuuuper hacky, but I found a way. There is some code in keyComboProcessor.js _isEditingText() that checks a few ways the user could be editing. If you match these with your focused element you can sneak around the handler. 

_isEditingText:function(keyboardEvent) {
    var targetElmt = keyboardEvent.target;
    if(targetElmt.tagName === "INPUT") {
      return!!EDITING_INPUT_TYPES[targetElmt.type]
    }
    if(targetElmt.tagName === "TEXTAREA") {
      return true
    }
    if(targetElmt.tagName === "DIV" && targetElmt.className) {
      return targetElmt.className.indexOf("cke_editable") !== -1 || targetElmt.className.indexOf("ql-editor") !== -1
    }
    if(targetElmt.tagName === "A") {
      return targetElmt.className.indexOf("select") !== -1 || !!(targetElmt.getAttribute("role") && targetElmt.getAttribute("role").indexOf("menuitem") !== -1)
    }
    return false
  }

For me, I just focused a DIV with a tabindex and gave it the cke_editable class.

Improve this answer
5
  • This worked great for me, thanks for finding this. I have a div with contentEditable = true and was having an issue with e and / firing Salesforce shortcuts. Adding cke_editable to the div stopped all Salesforce shortcuts
    – Benjamin Vogler
    Commented Jul 10, 2019 at 18:47
  • Hi, Where can I find this "keyComboProcessor.js" file to make changes ?
    – sf_user
    Commented Apr 8, 2020 at 11:09
  • 2
    @sf_user This is a SF system file, you can't modify it. What wellmstein was referring to is that he looked inside the code of that file and he noticed that piece of code that gave him the idea. In other words you don't have to modify the file, what you need to do is add a class name of "cke_editable" to your div and it will bypass the keyboard shortcuts.
    – Arthlete
    Commented Jun 12, 2020 at 18:51
  • Could someone please elaborate with an example. I have an aura page with a div tag and child tags of lightning:layout, lightning:recordEditForm, lightning:textarea, lightning:input. In chrome browser, i am able to find div tag with tabindex in the aura generated HTML as below- <div tabindex="-1" class="modal-glass slds-backdrop fadein slds-backdrop--open " data-aura-rendered-by="1138:0" style="opacity: 0.8;"></div> . But we don't have control to edit this rendered html file. We can only change aura .cmp file. Tried <div class="cke_editable"> in the cmp file but no luck so far.
    – kumar
    Commented Jul 13, 2022 at 22:00
  • I had to add cke_editable the html generated by a 3rd party component. To achieve this I had to use setTimeout to delay looking for the element until the 3rd party component has finished its render
    – Robs
    Commented Dec 12, 2023 at 21:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .