Thursday, 26 July 2018

Virtual keyboard typing first character when it is opened on Nexus Player, Android Cordova app

I know this is a very specific question on a specific device, but I need some insight on how to prevent this from happening in general.

I have a ReactJS app which has a build for Android using Cordova. One of the supported devices is the Nexus Player. For some reason, ONLY on the nexus player, when I open the virtual keyboard, it immediately types in the first character. This is usually wherever I left the character selector last.

So say I have an email input, if I type myemail@email.com and move on to the next input field, as I open the virtual keyboard it will type m. Of course this goes from being a minor nuisance to an actual problem if the user leaves the virtual keyboard at say the Enter key, which will block it from being opened and/or immediately submit the forms. I am currently out of ideas on how to deal with it.

For the inputs I am using a controlled component and setting it through the state, so the render function looks something like this:

render () {
  return (
    <form onSubmit={onSubmit} role='form' className='form'>
      <div className='form-group'>
        <div data-focusable data-focus-container>
          <input
            type='text'
            className='form-control'
            value={myValue}
            onChange={evt => this.setState({myValue: evt.target.value})}
            data-focusable
          />
        </div>
      </div>
    </form>
  )
}

Now... Because this is a navigation app, I have a keyboard listener that listens to whatever key I press from the remote on my component. I think that may be the way to handle this problem.

  keydownHandler(evt) {
    if (isDeviceNexuPlayer()) {

      if (keyCodeIs('select', evt)) {
        // do something to stop the first key from being immediately pressed
        console.log('this is being called as expected')
      }
    }
  })

As the console.log states, this works as expected. What I need to know is how I can stop that first key from being fired. I have tried a few things, so for nothing has worked:

  • evt.stopPropagation(): does nothing, still presses the first key upon opening the virtual keyboard
  • evt.stopImmediatePropagation(): Stops the whole thing to the point that it doesn't allow any key to work even after it has been opened

I don't know what else to do. I guess it doesn't even have to only apply to the nexus player. In general, what can I do to prevent that extra key from being pressed as I open the virtual keyboard?



from Virtual keyboard typing first character when it is opened on Nexus Player, Android Cordova app

No comments:

Post a Comment