React-360: onInput catches only mouse events

[steverob]

Description

This is the code I am using -

export default class WelcomeToVR extends React.Component {

  constructor(){
    super();
  }

  handleInput(event){
    console.log(event.type);
    console.log(event.nativeEvent);
  }

  render() {
    return (
      <View onInput={this.handleInput}>
        <Pano source={asset('chess-world.jpg')}/>
      </View>
    );
  }
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

Expected behavior

As per the docs here - https://facebook.github.io/react-vr/docs/input.html - I expected to get one of MouseInputEvent, KeyboardInputEvent, TouchInputEvent, or GamepadInputEvent when I did event.type, but that was undefined on the events that were caught by this handler.

And I found an interesting property called nativeEvent and when I consoled it, this is what I see -

Object {inputEvent: Object, target: 5, source: "mouse"}

inputEvent:
    altKey:false
    button:0
    buttons:0
    ctrlKey:false
    eventType:"mousemove"
    metaKey:false
    shiftKey:false
    type:"MouseInputEvent"
    viewportX:-0.2913616398243045
    viewportY:-0.7014084507042253
source:"mouse"
target:5

And even if I was doing keyboard inputs, this object kept reporting MouseInputEvents.

Actual behavior

Expecting event.type would return a value as per the docs. And also expecting onInput to capture KeyboardInputEvent.

Additional Information

• React VR version: vr - 1.0.0 / vr-web - 1.0.0
• Operating System: Ubuntu
• Graphics Card: Nvidia
• Browser: Chrome 56
• VR Device: Browser - no VR device.

[andrewimm]

React doesn't have an internal onInput type event (or onEnter, onMove, onExit either), so you first have to access it via the nativeEvent prop.
Once we adopt React 16, I'll see what I can do to make it a little easier to access the event.

In the meantime, I'll update the documentation to clarify that the event is found at e.nativeEvent.inputEvent, and try to release a new demo under Examples/ that shows how to collect events from each of the 4 default sources.

Unfortunately, I'm having difficulty reproducing the issue you describe. Are you sure they keyboard events aren't getting lost among the mouse ones, since I assume your console is printing many messages?

When I upload an example to show capture of all events, we'll be able to pinpoint with certainty whether your setup isn't capturing other events as intended.

[steverob]

@andrewimm thanks for your response. What you say makes sense interms of the nativeEvent.

But I am positive that I am only able to see mouse events. When I tested, if I do not move the mouse the messages stop in the console. And then I pressed keys in my keyboard and there were messages in the console in response to that - but they were all mouse events.

Would love to see the examples you're going to post. I know you have a ton of work in your hand, but do you know when I can expect to see those?

[FLGMwt]

@steverob I was able to capture keyboard events w/

handleInput(e){
    let event = e.nativeEvent.inputEvent;
    console.log(event.type);
}

Does that^ work for you?

[nikodunk]

To reproduce the original issue:

handleInput(e){
    console.log(e.nativeEvent.type);
}

This will always return "mouse", even when the keyboard is being pressed.

As noted by FLGMwt, this works fine:

handleInput(e){
    console.log(e.nativeEvent.inputEvent.type);
}

[lmiller1990]

I had this same problem. nativeEvent works for me, after reading here, but I expected it to be able to figure it out by reading this part of the docs.

Did you get a chance to add this to the docs @andrewimm ? If not, I'd like to contribute. If you didn't add it and are happy to have me do so, let me know which page/where you think it fits best, and I can give it a try.