Email field with space in React 16 backspace issue

TLDR: There’s an “issue” with backspace in an input type=email field and React 16 that has a conversation going on here.

While working on a React project, a testing “issue” came up while testing an email input field. I use “air quotes” here because… Well, spaces in email fields aren’t really a thing you’d happen upon in common real-world scenarios. Nonetheless, it’s a legitimate (albeit, non-critical) issue that you may encounter during dev/testing of a React app.

A tester was testing a login form and entered “Here is a test” into the email field to test if the field validation was working. Sure enough, that input was identified as an invalid email address. Okay! Time to go home. Until they tester started backspacing in the email field and found the cursor suddenly jump to the beginning of the field when backspacing over the space. In other words, the cursor jumped from the a to before the H at the very beginning of the email field and did not delete/backspace over the text.

After sleuthing, I found the above mentioned link. Linked here again if anyone encounters the same “issue” while testing backspacing in an input type=email field while developing in React. GitHub poster’s fiddle demonstrating the issue can be found here.

2 thoughts on “Email field with space in React 16 backspace issue

  1. “…has a conversation going on here.”

    The link takes you to a linkedin profile, not a conversation to learn more

    Do you still have the link where on can see the status of the conversation, and maybe check out possible solutions?

    Thanks in advance!

    Best, Ernesto

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.