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

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.

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.

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