Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent default behavior for Tab #19

Open
jamesfmac opened this issue Jun 11, 2019 · 3 comments
Open

Prevent default behavior for Tab #19

jamesfmac opened this issue Jun 11, 2019 · 3 comments

Comments

@jamesfmac
Copy link

jamesfmac commented Jun 11, 2019

Pressing the tab key seems to trigger the default behavior. The switch that is preventing defaults for Entered could be extended to account for this change.

This change should fix it:

handleOnKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    switch (e.which) {
      case 13:
        e.preventDefault();
        break;
      case 9:
        e.preventDefault();
        break;
      case 8:
        if (!e.currentTarget.value) {
          this.removeEmail(this.state.emails.length - 1);
        }
        break;
      default:
    }
  };

  handleOnKeyup = (e: React.KeyboardEvent<HTMLInputElement>) => {
    switch (e.which) {
      case 13:
        this.findEmailAddress(e.currentTarget.value, true);
        break;
        case 9:
        this.findEmailAddress(e.currentTarget.value, true);
        break;
      default:
    }
  };
thomasJang added a commit that referenced this issue Jun 30, 2019
@thomasJang
Copy link
Member

Thank you so much. just modified

@jamesfmac
Copy link
Author

Thanks @thomasJang!

@andystalick
Copy link

andystalick commented Dec 7, 2020

Just for other folks who come along - this change makes 0.5.2 incompatible with basic keyboard navigation - a core accessibility concern. Keyboard nav users would expect to hit tab in a regular input to advance to the next field. In this case, focus is trapped in the element.

Our team is pinning to 0.5.1 - perhaps we will be able to submit a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants