Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Taginput: cannot add items on mobile #595

Open
bayang opened this issue Sep 22, 2023 · 4 comments
Open

Taginput: cannot add items on mobile #595

bayang opened this issue Sep 22, 2023 · 4 comments
Labels
help wanted Extra attention is needed

Comments

@bayang
Copy link

bayang commented Sep 22, 2023

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.

@mlmoravek
Copy link
Member

Works fine for me on android with mobile chrome browser.

@bayang
Copy link
Author

bayang commented Sep 22, 2023

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.

@mlmoravek
Copy link
Member

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?

@mlmoravek mlmoravek added help wanted Extra attention is needed and removed can't reproduce labels Oct 5, 2023
@bayang
Copy link
Author

bayang commented Oct 5, 2023

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

@mlmoravek mlmoravek changed the title Inputitems: cannot add items on mobile Taginput: cannot add items on mobile Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants