Keyboard navigation

[zopieux]

Hi,

This lib is one of the few that have developers in mind: it provides many hooks to control the behavior. Thank you for that. Also the name is a nice pun ;-)

Alas, this lib also is one of the few that do not support keyboard navigation. One can only append tags with the keyboard. How am I supposed to delete the 2nd tag if I've just added the 9th? Currently, the only solution is to leave the keyboard and aim+click a 5px wide × button – or remove all tags up to 2nd with backspace and rewrite everything. I believe this is not an okay user experience for what is basically a text input enhancement. All other libs I tested provide either:

• full cursor navigation (demo): arrow keys moves the cursor in-between the existing tags; delete / backspace can then be used to remove the tag after / before the cursor. This feels very natural as it's the normal behavior of an <input/>
• partial navigation (demo): arrow keys move focus on existing tags; delete / backspace on the focused one to delete. This is not as natural, but at least one can delete any tag without leaving the keyboard

Do you have any plan to add one of these keyboard navigations to Taggle?

Cheers!

[okcoker]

Hi @zopieux

I like the functionality of the first one. I could see this being something to add for sure. Thanks for the issue!

[BlkPingu]

I love both. The fact that the second highlights duplicates and highlights the focused ones is are totally rad. Makes for a great UX

[bsansone]

Hi, I think keyboard accessibility is very important, not just for people who don't want to use a mouse, but also those who physically can't. We are looking to add support for being able to tab into the input to start adding tags, is this currently possibly (it doesn't look like any of the examples on https://sean.is/poppin/tags work like that)? If not, do you plan on adding it in? Any workarounds i.e. use javascript to get the element and add focus?

Thank you, appreciate the work you've done on this.

[okcoker]

Hi, I think keyboard accessibility is very important, not just for people who don't want to use a mouse, but also those who physically can't.

Agreed, I would love to add keyboard focus when time allows.

We are looking to add support for being able to tab into the input to start adding tags, is this currently possibly (it doesn't look like any of the examples on https://sean.is/poppin/tags work like that)? If not, do you plan on adding it in? Any workarounds i.e. use javascript to get the element and add focus?

You've actually pointed out an error that will need to be fixed in the next major version! The default tabIndex is 1 but it should be0 as described here :/

I've manually updated this on my site so thanks for the heads up on this. In the meantime you can just construct your instances with tabIndex: 0 until v2 is released.

[okcoker]

@zopieux thanks for opening this issue. I've added this in 1.15.0 and you can play around with it here: https://sean.is/poppin/tags

It required updating some of the CSS that was originally there but let me know if you have any issues.

[zopieux]

Just tried it, all the key navigation I tried (arrows, del, backspace) worked great and intuitively. Well done!