Binding to multiple instances fires the last instance

[matthew-dean]

I have a component wrapped like this:

<Hotkeys
  keyName='enter'
  onKeyDown={this._onClick}
>
  <div
    className={`${styles.Interactive} ${props.outline ? styles.outline : ''} ${props.className}`}
    onClick={this._onClick}
    disabled={props.disabled}
    tabIndex={!props.disabled && '0'}
    role={!props.disabled && 'button'}
  >
    {props.children}
  </div>
</Hotkeys>

I've found that when I make multiple instances of this component and press the keyboard, the last instance will be the one fired. So, if I have 4 buttons, the last one, with its this.props will be the one passed into the this._onClick handler no matter which of the four was focused when the keyboard was triggered.

[jaywcjlove]

_onClick(e){
+  e.preventDefault();
}
render() {
  return(
    <Hotkeys
      keyName='enter'
      onKeyDown={this._onClick}
    >
      <div
        className={`${styles.Interactive} ${props.outline ? styles.outline : ''} ${props.className}`}
        onClick={this._onClick}
        disabled={props.disabled}
        tabIndex={!props.disabled && '0'}
        role={!props.disabled && 'button'}
      >
        {props.children}
      </div>
    </Hotkeys>
  )
}

@matthew-dean This is an event bubbling?

[jaywcjlove]

@matthew-dean You can not use the same _onClick event name.

[prasid444]

Any update in this issue? I am facing same problem, while using multiple instances. Only last component is working.

[shokmaster]

The problem is that the event is attached to the , rather than the component tag:

https://github.com/jaywcjlove/react-hotkeys/blob/e7197a8d07b38de5293e4a74cf12e935035b6a4f/src/index.tsx#L49