Mobile Select Won't Focus

Question

on mobile, everytime a field gets filled, the enter key is pressed. This in turn focuses the next element. Unfortunately it works for all except a select. It'll completely skip the select control and go to input.

Example found here https://jsfiddle.net/dv5zbtn6/3/

 <form method="POST" class="rsvp-form js-form" id="rsvp-form" action="php/rsvp.php"> <div class="d-md-flex justify-content-between"> <div class="rsvp-form__left"> <div class="rsvp-form-field"> <input type="text" name="fullname" placeholder="Full Name" required> </div> <div class="rsvp-form-field"> <input type="email" name="email" placeholder="Your E-mail" class="js-email" required /> </div> <div class="rsvp-form-field"> <input type="text" name="guests" placeholder="Will you be bringing a plus one?" required> </div> <div class="rsvp-form-field"> <select name="attending" required tabindex="1"> <option value="" disabled selected>When we say 'I do', will we be seeing you?</option> <option value="Yes, wouldn't miss it for the world!"></option> <option value="No, will celebrate from afar!"></option> <option value="ceremony">Ceremony</option> <option value="party">Dinner & Party</option> </select> </div> </div> <div class="rsvp-form__right"> <div class="rsvp-form-field h-100"> <textarea rows="4" placeholder="Your Message" class="h-100" name="message"></textarea> </div> </div> </div> <button type="submit" class="rsvp-form-submit js-submit"> <span>Send</span> </button> </form>

I tried setting tabindex but that unfortunately didn't work. Any tips or suggestions would be greatly appreciated.

Answer 1

Look at the top answer here . This behaviour is not a bug per se. It's just that the Next/Enter button on a mobile, is not the same as a Tab button on a keyboard. The Enter button on a mobile specifically searches for the next typeable input field, rather than the next focusable one.