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 doesn't add tags on mobile #973

Closed
parkersprouse opened this issue Sep 6, 2018 · 9 comments
Closed

Taginput doesn't add tags on mobile #973

parkersprouse opened this issue Sep 6, 2018 · 9 comments

Comments

@parkersprouse
Copy link

Overview of the problem

Buefy version: [0.6.6]
Vuejs version: [2.5.17]
OS/Browser: Chome 68.0.3440.91 on Android 8.1.0

Description

I can't seem to be able to add any tags when testing my site on mobile. On my PC I can type in the input field and hit either enter or comma and the tag gets added, but hitting either of those on mobile does nothing. enter just moves to the next field while comma just types a comma in the field. I can't find a way to get the tag to actually submit on mobile.

@wrabit
Copy link
Contributor

wrabit commented Oct 24, 2018

+1
Also, if I have more than one taginput on the screen - on mobile, when I hit enter, it auto focuses on the next one without adding the current one first.

@jtommy jtommy added the bug label Oct 25, 2018
@wrabit
Copy link
Contributor

wrabit commented Nov 5, 2018

I think the issue is, at least on android chrome browser, if there are fields after the current one, it will show the user the tab key (keycode 9) instead of return, therefore Buefy not adding the keycode (Its only looking for enter 13 and comma 188) @jtommy is it ok to include the tab keycode as well?

@jtommy
Copy link
Member

jtommy commented Nov 12, 2018

@williamabbott I merged your PR but i don't think it resolves the android issue.

@wrabit
Copy link
Contributor

wrabit commented Jan 14, 2019

Maybe when the conditions are met we can display a "Add tag" header which when clicked, adds the typed characters as a tag. I've tried to detect the Android tab key with no luck and this could just be a fool proof and clear way to do it.

@tycrimm
Copy link

tycrimm commented Feb 26, 2019

#1065 breaks the ability to tab from a TagInput to another form component for the sake of the mobile fix. Reverting the PR allows the user to once again tab between input components on a desktop. Can we find a better workaround for mobile so we don't break the desktop experience?

@wrabit
Copy link
Contributor

wrabit commented Feb 26, 2019

@tycrimm Agreed, it's not a viable solution, I'd really like to see a "add 'typed term'" option appear first in the list as the user is typing, I was working on a pr for it:

screen-recording-2019-02-26-at-19 44 59

@jtommy
Copy link
Member

jtommy commented Feb 26, 2019

@tycrimm you're right and you might override default keys using confirm-key-codes prop at the moment.
Anyway I'll revert the PR

@service-paradis
Copy link
Collaborator

We would probably need to replace the use of deprecated KeyboradEvent.keyCode:
#1485 (comment)

@jtommy
Copy link
Member

jtommy commented Apr 30, 2020

Close #1940

@jtommy jtommy closed this as completed Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants