How to check if command key is pressed while clicking on tag

Question

I have overridden the onClick function of anchor() tag in ReactJs to show loading.

const child: ReactElement = Children.only(children);

const childProps = {};

childProps['onClick'] = (event) => {

    if (childProps.href && child.props.target !== '_blank') {
        props.showSpinner(true);
    }

    let onClick = child.props.onClick;
    onClick && onClick();
};

return React.cloneElement(child, childProps);

But the problem is that if the user clicks on anchor(<a>) with shift and command keypress, then the user switches to the new tab but loading started showing.

So I added the following condition to show loading.

if (!event.shiftKey && childProps.href && child.props.target !== '_blank') {
   props.showSpinner(true);
}

This code handled the Shift key press but I have to handle command keypress also. I searched through many posts, they showing solution for alt, shift, and ctl keypress but not command keypress.

This question has already been answered [Link Here](https://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript) — Soheb, Oct 17 '19 at 05:52
@MSoheb Thanks, But I have tag with `href` and only can override `onClick` and in this method, event.keyCode is giving undefined. — Ravi Sevta, Oct 17 '19 at 06:02

score 3 · Accepted Answer · answered Oct 17 '19 at 06:14

3

You can check value of event.metaKey inside onClick of a button.

    <button
      onClick={e => {
        console.log("CLICKED", e.metaKey);
      }}
    >
      Press
    </button>

In above example, You will get value of e.metaKey as true if command is pressed.

answered Oct 17 '19 at 06:14

Rajeev Godambe

56
1
4

2

for docs about event.metaKey : [https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey) – Ravi Sevta Oct 17 '19 at 08:35

score 0 · Answer 2 · answered Oct 17 '19 at 06:06

0

As far as I understand when we are working with React, window object is not available directly, have you tried with componentDidMount function

answered Oct 17 '19 at 06:06

Soheb

788
6
11

score 0 · Answer 3 · answered Sep 04 '21 at 01:37

I wrote a library that uses mouse modifiers to select things similar to how you can on operating systems!

Anyways, there is an example of detecting if the user is on Mac os and handling the meta key in the source code. Check out the pivot reducer.

https://github.com/ssteuteville/react-selection-hooks

How to check if command key is pressed while clicking on tag

3 Answers3