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

March 12, 2020
Tester Spotlight - Alex Che

We’re able to do what we do because of our incredible and diverse community of testers. Meet Alex, a Policeman now QA Engineer who gained the real-world QA experience he needed to change careers testing with test IO.

March 10, 2020
A Benefit of Crowdtesting - Time Compression

When budgeting for crowdtesting in the coming years, it's important to know all the value it adds. Here a little more on one of those values, time compression.

February 27, 2020
A test IO Bug's Life

You click submit on a new crowdtest and go home. When you wake, detailed bug reports are waiting in your Jira. But how did they get from the tester to you?

Ship Faster, Sleep Better

Get a Demo
twitterfacebooklinkedin