[BUG] Shortcuts ctrl+a/x/c/v doesn't work in Chrome 43

[DMShamonov]

Describe the bug
In Chrome 43 shortcuts ctrl+a/x/c/v doesn't work.

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc)
I use HotKeys

Expected behavior
I expect that handlers for ctr+ shortcuts will fire

Platform (please complete the following information):

• Version of react-hotkeys: 2.0.0-pre4
• Browser: chrome 43.0.2357.65 m
• OS: windows 10 enterprise evaluation 1803

Are you willing and able to create a PR request to fix this issue?
Might

Include the smallest log that includes your issue:

import * as React from 'react';
import {HotKeys} from 'react-hotkeys';

const keyMap = {
  selectAll: ['command+a', 'ctrl+a'],
  cut: ['command+x', 'ctrl+x'],
  copy: ['command+c', 'ctrl+c'],
  paste: ['command+v', 'ctrl+v'],
};

export default function hotKeysWrapper(WrappedComponent) {
  class HotKeysWrapper extends React.Component {
    ref = React.createRef();

    hotKeyHandlers = {
      selectAll: e => this.selectAll(e),
      copy: () => this.copy(),
      cut: () => this.cut(),
      paste: () => this.paste(),      
    };

    selectAll = e => {
      e.preventDefault();
      ... 
    }

    copy = () => {
      ... 
    }

    cut = () => {
      ... 
    }

    paste = () => {
      ... 
    }

    render() {
      return (
        <HotKeys
          className="container"
          tabIndex="2"
          keyMap={keyMap}
          handlers={this.hotKeyHandlers}
          innerRef={this.ref}
        >
          <WrappedComponent {...this.props} />
        </HotKeys>
      );
    }
  }

  return hotKeysWrapper;
}

What Configuration options are you using?
None

[greena13]

Hi DMShamonov, thanks for bringing this to my attention - it's a new one to me.

I'm hoping you can help me diagnose the issue:

Are the handlers called if you remove the command keymaps (so you don't use the array syntax)?

Are the handlers called if you use shift instead of ctrl in the keymaps?

[DMShamonov]

Are the handlers called if you remove the command keymaps (so you don't use the array syntax)?

const keyMap = {
  selectAll: 'ctrl+a',
  cut: 'ctrl+x',
  copy: 'ctrl+c',
  paste: 'ctrl+v',
};

doesn't fire

Are the handlers called if you use shift instead of ctrl in the keymaps?

const keyMap = {
  selectAll: 'shift+a',
  cut: 'shift+x',
  copy: 'shift+c',
  paste: 'shift+v',
};

doesn't fire

[greena13]

Thanks for the further information. Do the corresponding command keymaps work?

[DMShamonov]

On macOS Mojave 10.14.3 in Chrome 43.0.2357.134 keymaps command+a/x/v/c doesn't work to.

But if I use alt+enter it works...

[DMShamonov]

By the way, in Chrome 43 a KeyboardEvent.key has Unidentified value (not Meta)

[greena13]

Thank you for the extra information, @DMShamonov. react-hotkeys currently expects the key attribute to always be defined on KeyboardEvents. It's surprising to me that this is not the case for this particular version of Chrome.

Are you able to use React's onKeyDown prop to inspect the event and see if, when accessed directly through React, the the key attribute is still undefined?

[DMShamonov]

Direct onKeyDown prop on my tbody element returns:

• KeyboardEvent.key = Control for ctrl button
• KeyboardEvent.key = Unidentified for all character and numeric buttons. It's because keyboardevent.key not supported for Chrome to 50 version.

[greena13]

Ok, as Chrome 43 appears to be supported by React [1] [2] [3], I'll take a look into some sort of polyfill for when key is not available.

[travisdahl]

I just updated from 1.1.4 to 2.0.0-pre4 and suddenly alt+i is the only one of my bindings that dont work!? I roll back and it works. Its one of many alt+KEY bindings and for whatever reason that one doesnt work. I can change that binding to any other letter besides i and it works. Havent nailed down the source of the problem yet but I'll keep looking.

UPDATE. it fires if i press shift (alt+shift+i) as well even though its only defined as alt+i !? Some times the behavior is really unpredictable. Sometimes it works, but then i just hit alt (with no key combo) and it fires the last handler.

[greena13]

Very strange, @travisdahl.

Are you able to post a separate issue complete with logging?

[greena13]

I'm afraid after a couple of hours of trying, I cannot get Chrome 43 to install on my machine. Without it,
I need to see sufficient logging of the raw keyboard events, so I can understand what the browser is presenting to the React and react-hotkeys. It would also be helpful to know the version of React you are using, @DMShamonov.

With the obscureness of the issue (Chrome 43 was released over 3 years ago and I have not had many users experiencing this issue) and the difficulty of continuing to attempt to fix it, I'm afraid this is going to have to be a "Won't fix" unless someone else is able to have a go at a solution.

The file used by React (and re-used by react-hotkeys) for normalising events is relatively short and easy to follow here, if anyone is interested in taking this up.

I'm closing this issue for now, but if it remains high priority for you, @DMShamonov, and you're able to log out the raw key events, so I can compare them to how keyboard events are normalized then I may pick this up again. Thank you for all your help trying to resolve this issue.

[DMShamonov]

I use 16.6.3 version of react.

I try to log out the raw key events (logLevel: 'debug') but I catch an error Uncaught TypeError: Illegal invocation FocusOnlyKeyEventStrategy.js:209

[greena13]

Hey @DMShamonov,

Could you try logging them out directly (not through react-hotkeys)?

Something like the following:

<input 
  onKeyDown={(event) => console.log(JSON.stringify(event, null, 4)) }
  onKeyPress={(event) => console.log(JSON.stringify(event, null, 4)) }
  onKeyUp={(event) => console.log(JSON.stringify(event, null, 4)) }
/>

And then click on the input and press ctrl and c.

[DMShamonov]

This is in console after press ctrl+c

{
    "type": "keydown",
    "eventPhase": 3,
    "bubbles": true,
    "cancelable": true,
    "timeStamp": 1561017810552,
    "defaultPrevented": false,
    "detail": 0,
    "key": "Control",
    "location": 1,
    "ctrlKey": true,
    "shiftKey": false,
    "altKey": false,
    "metaKey": false,
    "repeat": false,
    "charCode": 0,
    "keyCode": 17,
    "which": 17
}

{
    "type": "keydown",
    "eventPhase": 3,
    "bubbles": true,
    "cancelable": true,
    "timeStamp": 1561017810552,
    "defaultPrevented": false,
    "detail": 0,
    "key": "Unidentified",
    "location": 0,
    "ctrlKey": true,
    "shiftKey": false,
    "altKey": false,
    "metaKey": false,
    "repeat": false,
    "charCode": 0,
    "keyCode": 67,
    "which": 67
}

{
    "type": "keyup",
    "eventPhase": 3,
    "bubbles": true,
    "cancelable": true,
    "timeStamp": 1561017810612,
    "defaultPrevented": false,
    "detail": 0,
    "key": "Unidentified",
    "location": 0,
    "ctrlKey": true,
    "shiftKey": false,
    "altKey": false,
    "metaKey": false,
    "repeat": true,
    "charCode": 0,
    "keyCode": 67,
    "which": 67
}

{
    "type": "keyup",
    "eventPhase": 3,
    "bubbles": true,
    "cancelable": true,
    "timeStamp": 1561017811262,
    "defaultPrevented": false,
    "detail": 0,
    "key": "Control",
    "location": 0,
    "ctrlKey": false,
    "shiftKey": false,
    "altKey": false,
    "metaKey": false,
    "repeat": true,
    "charCode": 0,
    "keyCode": 17,
    "which": 17
}

[greena13]

That's fantastic. Thanks for getting that, @DMShamonov.

I'm in the middle of a refactor of the package at the moment, but when I am done, I'll loop back around to this. Re-opening to indicate this is still ongoing.