useKeyPress doesn't track repeated combination keypresses until the entire combination is released

Describe the Bug

When using useKeyPress to track combinations of keys, for example Meta+z, repeated keypresses are not captured if you continue to hold down the Meta key.

Your Example Website or App

https://codesandbox.io/s/recursing-driscoll-stvwou?file=/src/App.js

Steps to Reproduce the Bug or Issue

When const comboPressed = useKeyPress("Meta+z");:

• Press and hold Meta
• Press and hold z
• comboPressed is true
• Release z
• comboPressed is still true and so additional presses of z can’t be detected
• Release Meta
• comboPressed is now false

The inverse does not have the same behaviour:

• Press and hold z
• Press and hold Meta
• comboPressed is true
• Release Meta
• comboPressed is now false and so additional presses of z can be detected

Expected behavior

As a user I would expect that after I press Meta and z, and then continue to hold Meta but release z that the pressed state of useKeyPress("Meta+z") is false.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: 103.0.5060.53

Additional context

No response

[moklick]

Ok, thanks. We will need to check how other libs handle this

[allenhwkim]

IMO, it should use keydown event instead of keypress event. The following code is what I have tried without useKeyPress API, and it seems working

Note. this example is using state management library

import * as React from 'react';
import {KeyboardEvent} from 'react';
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

import useStore from './store';

function Flow() {
  const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStore();

  const onKeyDown = (event : KeyboardEvent) => {
    const ctrl = event.ctrlKey ? 'Control-' : '';
    const alt = event.altKey ? 'Alt-' : '';
    const meta = event.metaKey ? 'Meta-' : '';
    const shift = event.shiftKey ? 'Shift-' : '';
    const key = `${ctrl}${alt}${shift}${meta}${event.key}`;
    if (!['Alt', 'Shift', 'Meta', 'Control'].includes(event.key)) {
      console.log(`${key} pressed`);
    }
  }

  return (
    <ReactFlow 
      tabIndex={0}
      onKeyDown={(e) => onKeyDown(e)}
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
    ></ReactFlow>
  );
}

export default Flow;