HTML mobile web input with enterkeyhint not focussing on next input if type is text

Question

I'm working on an HTML form for a web app. I'm adding the enterkeyhint attribute to indicate and navigate to the next input until the last one submits the form. The problem is that enterkeyhint doesn't navigate to the next input if its type is type=text. This happens on Chrome/83.0.4103.101 for Android 7. In Safari the hints button appears but they all do nothing.

Example:

    <form (submit)="submitForm()">
        <div>
            <label>Name</label>
            <input type="text" enterkeyhint="next" inputmode="text" />
        </div>
        <div>
            <label>Email</label>
            <input type="email" inputmode="email" enterkeyhint="next" />
        </div>
        <div>
            <label>Comments</label>
            <input type="text" />
        </div>
    </form>

• Focusing on Name input, the Next button doesn't do anything.
• Focusing on Email input, it navigates to any next input (Comments)

Now, if I change the type=email for type=text it doesn't navigate to the next input.

Similar behavior happens for type=tel. It does navigate to the next input of the form.

Am I missing something to make this work?

Thanks

Answer 1

enterkeyhint is just a hint to the browser what to display on the virtual keyboard, but you need to implement the actual behaviour yourself. See for example Focus Next Element In Tab Index, or How to focus next input field on keypress if your DOM is simple enough that the input fields are siblings with the default tab order.

From the spec:

The enterkeyhint content attribute is an enumerated attribute that specifies what action label (or icon) to present for the enter key on virtual keyboards. This allows authors to customize the presentation of the enter key in order to make it more helpful for users.

There is nothing in the spec to suggest that enterkeyhint actually affects the behaviour of the Enter key.