Why can't I set focus to <View> to use onKeyDown

[gangli66]

I want to add listener to key pressed events. In Android and iOS, I use react-native-keyevent to do it, but it doesn't be supported in react-native-windows. So I use IKeyboardProps to caputure the key event, but I can only use it in TextInput. From APIs, I know it can be used in View, but When I use it, there is no words out to the console. Here are my codes, is there any body can help me to implement it? Or any other package can do it just like react-native-keyevent in react-native-windows? Thanks.

---

import {useRef} from 'react'; import { TextInput, View } from 'react-native'; import { IKeyboardProps } from 'react-native-windows';

const WebPage = ({navigation}) => { const viewRef = useRef();

const onKeyDown = (e : IKeyboardEvent) => { console.log("key:", e.nativeEvent.key); }

const onBlur = () => { viewRef.current.focus(); }

return ( <View> <View style={{width: 0, height: 0}} acceptsKeyboardFocus={true} ref={viewRef} onKeyDown={onKeyDown} onBlur={onBlur} autoFocus={true} /> <Input /> </View> ); };

[rozele]

I think acceptsKeyboardFocus was deprecated / removed. Can you try focusable instead? https://github.com/microsoft/react-native-windows/commit/443f76a03724d0b456e4422499a768d4d02657d3

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[gangli66]

I think acceptsKeyboardFocus was deprecated / removed. Can you try focusable instead? 443f76a

Thanks for you reply, but it still does not work for me by using focusable on <View>.

[rozele]

Also, autoFocus isn’t implemented on View, so you’d actually have to tab to the View to give it focus. Have you confirmed that the view actually has focus (e.g. either by setting enableFocusRing or by subscribing to onFocus events?

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.

[gangli66]

Also, autoFocus isn’t implemented on View, so you’d actually have to tab to the View to give it focus. Have you confirmed that the view actually has focus (e.g. either by setting enableFocusRing or by subscribing to onFocus events?

I put a <WebView> inside the <View> and I want to listen keydown event to get inputs from a barcode scanner. It is difficult to let every user tab to the view to get focus and enable the listener. So I expect that the View can get focus automatically. I have remove the prop autoFocus and use useEffect and useRef to let the View get focus, but I failed.

I have another example like this:

<View>
  <Button />
<View>

When I click the Button, it should get focus. So does the View get focus also?

[chrisglein]

Based on what I'm reading here I think you're looking for bubbled/routed/tunneling event hooks (the ability to catch events in parent controls before and/or after the direct control gets those events). I believe there have been drafts of those style of events (which do exist on UWP controls) but they don't exist today. You only get the event for the target item.

Is that an accurate understanding of what you're looking for?