Support Keyboard Shortcuts

[shoaibshakeel381]

Please add support for keyboard shortcuts. and standard select behaviour. Like opening dropdown on focus. Selecting elements with enter. And support for arrow keys.

[progmars]

+1

Our UI tester rejected angular-ui/ui-select because of complete lack of keyboard support in dropdown mode, and I wanted to give this angular-multi-select a try, but this issue means that I'll have to look somewhere else. It's so hard to find UI components which build upon existing default HTML element functionality. Instead, most developers start by implementing fancy features first and then much later add the basic stuff, which means that proper keyboard support often comes last...

[isteven]

@shoaibshakeel381

It support keyboard shortcut. Have you actually tried it?

To select/deselect/push a button, press space. To navigate between elements, use the arrow keys.

You can change the code to add more keyboard shortcut.

[isteven]

@progmars ,

I don't really understand your requirements (as in why you cannot use the default HTML element like you mentioned), so I can only say that this directive has keyboard support, albeit a little different from standard HTML select.

[progmars]

Ok, then I guess that's a feature request for single-select mode with Enter key support :) When I go here: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select only Enter key completes selection and closes the dropdown. But I understand that such behavior might be not desirable for multiselect, when selecting multiple items.

The main reason why simple <select> often is not enough, is rich templates for dropdown items and currently selected item.

I have seen many projects where we need both kinds of selects - multiselect and single select to replace <select>. It really is a PITA to find a library which supports both and at the same time behaves as <select> as much as possible. This leads to developers picking different libraries for each kind of <select>, and each library has different API (and sometimes different behavior), which makes it confusing for developers.

[isteven]

@progmars ,

That Enter key is definitely one of the things to update for the next release. However, my hands are quite full at the moment. If you need it urgently, I suggest you to modify the code yourself.

I understand your situation - this directive was created because I wanted a pure AngularJs solution. And at that time the available options are quite limited.

[progmars]

To make things even more complicated, default <select> has some other tricky keyboard processing:

• if you hit TAB when dropdown is closed, you will focus to the next element in form
• if you hit TAB when dropdown is open, you will select the currently highlighted item and remain focused on the same <select>
• if you hit UP/DOWN arrows when dropdown is closed, you will change <select> values without even opening the dropdown.

[progmars]

However, my hands are quite full at the moment. If you need it urgently, I suggest you to modify the code yourself.

Ok, thats fair. I looked at the code - it is clean and easy to understand, so I indeed might be able to add something without breaking (much).

[isteven]

Ok, thats fair. I looked at the code - it is clean and easy to understand

LOL I've been bashed a lot by others who said that my code is dirty and non-Angular way. Your comment is heaven sent.

Anyway, in the directive, you can check single or multiple selection mode using this variable:

$scope.selectionMode 

String "single" = single selection other string / blank / not defined = multiple selection (this is the default mode)

Hopefully that helps.

[zachlysobey]

@isteven I'm gonna jump in here and be a bit off topic.

I think it is a huge shame that you have been "bashed" for your code. You have done the community a great service by essentially donating your hard-work to create this impressive code.

I personally am a bit crazy (anal) when it comes to code-style, and would be lying if I thought your code was clean. However, its definitely nowhere near the worst I've seen, and I'm pretty sure you're not being paid to do this. You probably do not want to give up more of your free time making cosmetic changes. And we should not expect you to.

As for doing things in a "non-angular" way... I think there is maybe potential to make your plugin integrate into angular a little more intuitively, BUT... doing things in an "angular way" is not always even a good idea, and I think your approach is just fine.

I recently listened to an episode of Angular Air where they interviewed the creator of Ag-Grid, and excellent grid plugin for Angular. He specifically tried to do things in an "angular" way, and performance suffered. He ended up coding it with plain old javascript patterns, just tying angular API's in as needed, and now it performs much better than anything else out there.

Doing things in a non-angular way also improves portability. It would be awesome if this library could eventually become a pure web-component. Or have a port to React. Or Ember. Or jQuery.

Keep up the good work. You may have some detractors, but just look at your stars (635 and counting). Those are votes of confidence. You deserve all of our gratitude.

[progmars]

I have had a chance to implement some project-specific fixes and additions for KendoUI library and I found it to be real PITA to track all the interdependecies and to predict how my custom code will affect other parts. In this regard @isteven 's code is much more readable, especially because it has so many comments. Just compare it to this Telerik dropdown compnent: https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.combobox.js and you'll see what I mean.

[isteven]

@zachlysobey,

Okay maybe the word "bash" is too much. Let's say.. not all of them are happy. As for the rest, you pretty much nail it. In between daily job & other life obligations, there's only so much an open-source developer can do. In my case, no dev effort for now, but I try to provide support when possible.

I recently listened to an episode of Angular Air where they interviewed the creator of Ag-Grid, and excellent grid plugin for Angular. He specifically tried to do things in an "angular" way, and performance suffered. He ended up coding it with plain old javascript patterns, just tying angular API's in as needed, and now it performs much better than anything else out there.

The very same reason for me. And - I hope I don't offend anyone here - in my humble opinion, AngularJS is not really built for speed. However, it is an acceptable trade-off for easier development process.

Doing things in a non-angular way also improves portability. It would be awesome if this library could eventually become a pure web-component. Or have a port to React. Or Ember. Or jQuery.

That's definitely on my wish list.. see https://github.com/isteven/angular-multi-select/issues/351. I imagine one can grab the main JS logic and just use different logic for the $watch-ers, bindings and template (OK perhaps that's a bit too much). For jQuery.. there are quite a lot of multi-select library for a mature platform such as jQuery, so I don't think they need more :)

Thanks for your kind words. Cheers & keep coding.

PS: no offence but I thought Jack Black was on Github LOL.

[zachlysobey]

I thought Jack Black was on Github

lol :)

[isteven]

@progmars ,

Again thanks for the kind words. Glad my comments are useful. They're not the best out there but oh well..

And yes I had my fair share of nightmare porting jQuery datetime picker into AngularJS :)

Btw now that you mentioned comment; I would like to share this good short read regarding comment in code: http://blog.codinghorror.com/code-tells-you-how-comments-tell-you-why/

TL;DR version:

• A good code tells you how
• A good comment tells you why

[zachlysobey]

Great article!

A somewhat-different take on comments, with a good discussion:

http://butunclebob.com/ArticleS.TimOttinger.ApologizeIncode

[abhishekpanku]

@shoaibshakeel381

It support keyboard shortcut. Have you actually tried it?

To select/deselect/push a button, press space. To navigate between elements, use the arrow keys.

You can change the code to add more keyboard shortcut.

hey how i can add the arrow key feature in multiselect dropdown