oruga
oruga copied to clipboard
oruga-ui
Inputitems: cannot add items on mobile
Overview of the problem
Oruga version: [0.6.0] Vuejs version: [3.2] OS/Browser: android + chrome/vivaldi
Description
I encountered a problem in one of my apps lately : I can't add new items (only on mobile) etither by pressing enter or comma on the keyboard. I can't tell when the problem started.
The problems only happens with chrome and chrome derived browsers (I tested with chrome and vivaldi on mobile and both fail.) With firefox the component works as expected and I can add items.
Steps to reproduce
I can reproduce the same issue on the oruga documentation page. If I visit this page on mobile : https://oruga.io/components/inputitems.html I reproduce the same issue on the sample called "autocomplete", I tick the "allow new items" input and type something then press enter or comma, no item is added.
Actually, I just noticed that pressing comma does nothing, but pressing enter takes me to the next input field in the page. I tried to see if that could be something that I can change from the browser settings but I couldn't find anything.
Yes, pressing enter on an autocomplete component (internally Inputitems is an autocomplete component) on a mobile agent changed the focus to the next input, even on onKeydown the event.preventDefault() is done if key === "Enter".
source link
Any idea how to prevent the focus swith on mobile?
I might be totally off tracks here, but could this be related to the enterkeyhint attribute ?
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint
The current behaviour is as if enterkeyhint was set to next.
This SO comment says :
I just tried again and <input type="text" enterkeyhint="done" /> <input type="text"/> does prevent the enter key to move to the next field
https://stackoverflow.com/questions/70867312/how-to-avoid-input-field-from-showing-next-option-instead-of-go-on-mobi#comment129665274_73262656