4

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?

theJuls
  • 6,788
  • 14
  • 73
  • 160

1 Answers1

0

This may sound a bit daft, but worth trying. Try to turn off the keyboard, take out the batteries, wait a bit, then put them back in and try again? When it restarts it may not be firing that first key. Also, not sure why the attached code is relevant?

fattalico
  • 21
  • 1
  • 9
  • It's not an actual physical keyboard. It is the virtual keyboard that opens when you select a form that needs something types in. The code is relevant because that is how I am handling the input and how I am attempting to stop it from immediately typing something in. – theJuls Jul 31 '18 at 14:12
  • Maybe changing your code from `evt.stopPropagation()` to `event.stopPropagation()` would make a difference? This would just prevent any parent handlers from being executed - this would maybe stop the "m" click from bubbling up to parent elements. – fattalico Aug 01 '18 at 09:48