react-tags icon indicating copy to clipboard operation
react-tags copied to clipboard

Being more productive by pressing ENTER

Open acataluddi opened this issue 5 years ago • 7 comments

Hi Guys,

we hopefully added a small improvement to the widget logic to let user being more productive by using the keyboard.

Only when allowNew is false, we automatically select the first entry so that, should it be the right entry for you, you can immediately confirm by pressing ENTER. Otherwise, you can:

  • continue typing to increase the selectivity and filter the entries.
  • use the top/bottom arrows to select the suggested entries

In addition, we added the possibility to easily switch between the input control and the suggested values by pressing TAB.

Credits - Roberto Rizzo

Best regards, Adriano C.

acataluddi avatar Sep 04 '20 08:09 acataluddi

Coverage Status

Coverage remained the same at 100.0% when pulling 27a70df0d2dc1324f3da967d397f5e0e237e183a on metagusto:use-tab-to-browse-suggestions into a9d7788834e440e5d8eecd346c43dbab46bda864 on i-like-robots:master.

coveralls avatar Sep 04 '20 08:09 coveralls

Thanks for your contribution @acataluddi. This feature has been suggested a few times over the years (#55) but it's always seemed confusing so I've avoided implementing it. I'll check out your branch and see how it works.

i-like-robots avatar Sep 17 '20 16:09 i-like-robots

Thanks for your contribution @acataluddi. This feature has been suggested a few times over the years (#55) but it's always seemed confusing so I've avoided implementing it. I'll check out your branch and see how it works.

Hi Matt,

Sorry, we implemented the new behaviour without checking for any previous occurrence/request for this feature: our bad.

If I can elaborate a bit further the rationale behind this feature, the big plus of advanced selection widgets like react-tags, select2 and similar is, in my opinion, to speed up the item search/selection by the keyboard. That said, is mega powerful having a way to immediately confirm a tag as soon as the typed chars are enough to select the desired one.

Arguably, there is no better key than the ENTER one for this.

Of course, when the allowNew property is true, this behaviour should be disabled as the user expectation would be instead to commit the type chars into a new tag.

This is the behaviour implemented in this pull request.

Thank you for checking it, Adriano C.

acataluddi avatar Sep 18 '20 10:09 acataluddi

Hello guys, is this feature not implemented on 6.1.0? For some reason I can't use it! Thanks for the great library!

joscaohenri avatar Dec 04 '20 23:12 joscaohenri

Hello guys, is this feature not implemented on 6.1.0? For some reason I can't use it! Thanks for the great library!

Hi @joscaohenri,

As you can see, the branch has not yet been merged (status open), so it can be part of any release. I’m sorry.

In the meantime, you might want to use our internal company version: https://github.com/metagusto/react-tags

Regards, Adriano

acataluddi avatar Dec 05 '20 06:12 acataluddi

Still waiting for this to be merged 👀

sepsol avatar Jun 01 '21 18:06 sepsol

@i-like-robots Could you merge this? There are several people waiting for this feature

juanlet avatar Jun 25 '21 19:06 juanlet