niksmr/vue-masked-input

Tab key not working to move focus

andreladocruz opened this issue · 5 comments

andreladocruz commented
Tab key not working to move focus
Ex10Dios commented

Try to add this line in maskedinput.js

mouseup: this.mouseUp,
focusin: this.mouseUp, // line to add
focusout: this.focusOut,
andreladocruz commented

@Ex10Dios, thanks!!!

I'm running it in a Laravel installation.

I edited both files (in dist and src directories) and compiled again with NPM.

But still the same issue.

Any clue about what I'm doing wrong?

gml-fahlgren commented

This appears to be an issue with Firefox only. I'm experiencing this with FF v59.0.1 on both Mac and PC.

  • 😕1
andreasvirkus commented

Similar issue to @gml-fahlgren - seems to only affect Firefox.

Edit: Further debugging shows that the tab keyCode check is actually reached in FF

keyUp: function keyUp(e) {
  console.log('KeyCode in keyUp', e.keyCode);
  if (e.keyCode === 9) {
    console.log('Tab pressed!');
    // Prevent change selection for Tab in
    return;
  }
  this.updateToCoreState();
  this.updateAfterAll = false;
}

so I'm wondering if either we're returning the wrong value or the event doesn't bubble up properly? 🤔

andreasvirkus commented

@gml-fahlgren I've managed to find a fix, it's actually in the firefox/IE check in keydown listener:

if (isIE || isFirefox) {
  e.preventDefault();
  e.data = e.key;
  this.textInput(e);
}

And the temporary fix (although I think it could be handled more elegantly, since a lot of other key modifiers are still blocked atm like browser tab shortcuts [Alt+N]):

if ((isIE || isFirefox) && e.keyCode !== 9) {
  e.preventDefault();
  e.data = e.key;
  this.textInput(e);
}

I'm planning to fork the repo soon. I'd first want to do some clean up on the code.
I'll post the new repo link then under #42

  • 😄1