microsoft / microsoft/react-native-windows

Not able to get any of the keyDown events triggered on virtual machine.

Open
#10,842 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Keyboard bug Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Discussed in https://github.com/microsoft/react-native-windows/discussions/10822

Originally posted by gabimoncha November 2, 2022
Hi,

I've been trying to console the keyboard props but with no success. Mouse events seem to work though.
I'm running the latest version 0.70 inside a Parallels VM.

I've also tried the docs, which are using class syntax with no prevail

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import { HandledEventPhase, ViewWindows } from 'react-native-windows';

const App = () => {
  const handledNativeKeyboardEvents = [
    {
      code: 'a',
      handledEventPhase: HandledEventPhase.Capturing
    },
    {
      code: 'A',
      handledEventPhase: HandledEventPhase.Bubbling
    }
  ];

  const onMouseEnter = () => {
    console.log('enter')
  }

  const onMouseLeave = () => {
    console.log('Leave')
  }

  return (
    <ViewWindows
      onKeyDown={(e) => {
        console.log({ e });
      }}
      onKeyDownCapture={(e) => {
        console.log({ e });
      }}
      style={styles.container}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      keyDownEvents={handledNativeKeyboardEvents}
      keyUpEvents={handledNativeKeyboardEvents}
      focusable
    >
      <Text style={styles.title}>Key test</Text>
    </ViewWindows>
  );
};

const styles = StyleSheet.create({
  backgroundStyle: {
    backgroundColor: 'black',
  },
  container: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffDD'
  },
  title: {
    fontWeight: 'bold',
    fontSize: 22,
    color: 'black'
  },
});

export default App;

```</div>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the sample with ViewWindows, onKeyDown, onKeyDownCapture, keyDownEvents, keyUpEvents, and focusable inside the reported Parallels VM setup. Trace React Native Windows keyboard-event handling from that entry point; done means the keyDown and keyUp callbacks receive keyboard events as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.