Solving auto-tab bugs with focus commands and valid input types

February 14, 2018
Aqueelah
Aqueelah

This post is part of a series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.

Auto tabbing is when a form automatically jumps from one field to the next when the user hits the maximum number of characters, hits tab, or enter. The user should not have to perform any action other than filling out the input form properly and meeting the requirements for that input field. Input types are the values you set up for your fields. For example, if a user is entering a U.S. phone number you’ll implement it as a numeric field with 10 digits. If the user is entering a name, that should be created as  as a text field. In both cases you can also add a character limit.

For our bug of the week, we’re taking a look at a bug that prevents users from completing the sign up process.

Auto tab bug during sign up process

While performing functional testing on a fitness website, one of our testers found a bug in the process of filling out an online form. First, the tester navigated to the sign-up form on the site. Then, they started to fill out the fields in form. The tester filled out their name on a screen but once they were finished typing in the field, the form did not auto tab, display the next field, or  proceed to the next screen.

The bug was initially discovered on Windows 7 on the Chrome browser. However, it ended up being reproducible on multiple platforms.

Lessons learned and best practices from test IO

This bug highlights the importance of properly implementing tabbing functionality in your user interface. Whether you are developing for web or mobile you must ensure that you have input types and focus methods in place. In this native form UX and web form UX article, React Native Cafe addresses the difference in behavior between native and web forms. They also discuss the importance of implementing the keyboard TextInput and triggering focus on submit. In this auto-tab html inputs article Blue Key Interactive addresses the importance of setting the correct character limits for your field.

In this case, the input field may have not auto-tabbed because the focus commands were not in place. It could be the case that the input field was looking for the user to enter additional characters. Even if the focus command were in place, the character limit condition would need to be fulfilled as well. No matter what platform you are developing on, tab focus and the correct input type set up are vital to your form’s user experience

Read More

June 13, 2019
The Important of Manual-Stage Testing

Incorporating manual testing into your development pipeline, without bottlenecks.

June 7, 2019
Regression Testing: Where Does Crowdtesting Fit In?

What is regression testing, and how does crowdtesting benefit it?

May 30, 2019
HUM Nutrition: A Test a Day Keeps the Bugs Away

test IO helps HUM Nutrition provide customers with life-changing products.

Ship Faster, Sleep Better

Get a Demo
testIO Logo Footer
test IO Inc.
1111 Broadway, Floor 3 
Oakland, CA 94607
USA

test IO GmbH
Sonnenallee 223 a
12059 Berlin
Deutschland
twitterfacebooklinkedin