When I Select Next From My Android Device, While Filling A Form, It Skips Any Drop Down

I have a web form consisting of input text boxes, drop downs and submit button. When I use my website on android phone - chrome browser(or any browser on my android device, I am us

Solution 1:

Don't confuse the Next button of your keyboard as TAB key, it's not. The next button of your keyboard just looks for next input field that is editable by your keyboard e.g text or number field. It will skip everything else because that will require closing the keyboard and bringing up the native calendar or combo box selector.

The TAB key if exists in your keyboard works just as expected. Some keyboards on play-store has a TAB key, like this one. You can download and see pressing the TAB key does focus the next select element or date-input element.

The following demo shows the difference of TAB key and Next button. You can see while navigating using the TAB key, keyboard events fire, which reveals the TAB keyCode 9. But while using the Next key, no keyboard event fires, as if the browser doesn't even know what just happened.

document.getElementById('my_form').addEventListener('keydown', function(event) {
  document.getElementById('response_view').innerHTML = event.keyCode;
})

<formaction=""id="my_form"><div>
    Last Key Press Key Code:
    <spanid="response_view"style="color: red;"></span></div><div><inputtype="text"name="first_name"id="first_name"size="35"placeholder="Select it by click"></div><div><inputtype="text"name="last_name"id="last_name"size="35"placeholder="Then use TAB/Next key to focus this input"></div><selectname="date_day"><optionvalue="-1">Select Day</option><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option></select><div><inputtype="text"name="address"id="address"size="35"placeholder="address"></div></form>

The only way I see fit to resolve this issue is to use JavaScript to keep track of input elements in focus to determine if the Next key was pressed and it skipped a select element, then focus the select element by JavaScript.

(function(){
  let editableElementsSelector = 'input[type=text],input[type=email],input[type=number]';
  let nonEditableElementsSelector = 'select,input[type=date],input[type=time]';
  let userClickDetected = false, userTouchDetected = false;
  // Kepps track of user click for 0.5 secondswindow.addEventListener('click', function() {
    userClickDetected = true;
    setTimeout(()=>{userClickDetected = false;}, 500);
  });
  // Kepps track of user touch for 0.5 secondswindow.addEventListener('touchstart', function() {
    userTouchDetected = true;
    setTimeout(()=>{userTouchDetected = false;}, 500);
  });
  document.querySelectorAll('form[next-button-fix]').forEach(function(form){
    let formElements = form.elements;
    let editableElements = form.querySelectorAll(editableElementsSelector);
    let nonEditableElements = form.querySelectorAll(nonEditableElementsSelector);
    // linking elementsfor(let i=1; i<formElements.length; i++){
      formElements[i].previousFormElement = formElements[i-1];
      formElements[i-1].nextFormElement = formElements[i];
    }
    // Focuses next element on Next button click
    editableElements.forEach(function(element){
      element.addEventListener('blur', function(event){
        if(!userClickDetected && !userTouchDetected){
          if(element.nextFormElement && event.relatedTarget != element.nextFormElement){
            element.nextFormElement.focus();
          }
        }
      });
    });
    // Focuses next element on select element change
    nonEditableElements.forEach(function(element){
      element.addEventListener('change', function(event){
        if(element.nextFormElement){
          element.nextFormElement.focus();
        }
      });
    });
  });
})();

Solution 2:

Try like this

set your spinner with focusable attribute as true,

yourEditText.setOnEditorActionListener(new OnEditorActionListener() {
    @Override
    public boolean onEditorAction(TextView textView, int actionId, KeyEvent event) {
        if (actionId == EditorInfo.IME_ACTION_NEXT) { //trigger when user taps on next button in keyboardhideKeyboard(); //hides the keyboard as it is not necessary here
            yourEditText.clearFocus();
            yourSpinner.requestFocus();
            yourSpinner.performClick();//opens the dropdown in your spinner
        }
        return true;
    }
});

//hide keyboard when spinner is focused

privatevoidhideKeyboard() {
    InputMethodManager inputManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
    inputManager.hideSoftInputFromWindow(this.getCurrentFocus().getWindowToken(),
            InputMethodManager.HIDE_NOT_ALWAYS);
}

Solution 3:

consider using the tabIndex

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

Here is an example which focus input and div in a weird order choised by me:

div:focus { font-weight: bold; }

<br><label>CLICK THIS INPUT THEN TAB <inputtabindex="0"></label><br><divtabindex="1">FOCUS 2 (ye u can focus text too)</div><br><label>FOCUS 4<inputtabindex="3"></label><br><label>FOCUS 3<inputtabindex="2"></label><br><label>no FOCUS<inputtabindex="-1"></label><br><label>FOCUS 5<inputtabindex="4"></label><br>

Solution 4:

Edit: This technique works well on Android, but causes the select element to no longer function in Firefox. Pooh.

Simply add the contenteditable attribute to your select element. It will cause the keyboard to recognize the select as a viable element for focus.

Upon nexting to the select, it will receive focus and the keyboard will remove itself from the screen. The select element will not be expanded, requiring the user to touch it for expansion and to make a selection. Additionally, after making a selection, the user will be required to touch the next field in the form because the keyboard is not active to provide its next button.

My opinion is that this is the most reasonable behavior for the form to exhibit. That said, this problem should be solved higher up the chain (by browser and/or keyboard software vendors).

This was tested on Android 6.0.1 using both the GBoard and TouchPal keyboards. The CSS below is only included to make the form look a little nicer. The only thing needed for this to work is the contenteditable attribute on the select element. The fields must also be contained within a <form> tag (nexting does not appear to work without the form tag).

.form-field {
	padding: 10px;
}

.form-fieldlabel {
	display: block;
}

.form-fieldinput,
.form-field select {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

<form><divclass='form-field'><label>Name</label><input/></div><divclass='form-field'><label>Age</label><input/></div><divclass='form-field'><label>Mood</label><selectcontenteditable><optionvalue=''>Please Select</option><option>Happy</option><option>Sad</option><option>Glad</option><option>Mad</option><option>Rad</option></select></div></form>