zestia / ember-select-box

:capital_abcd: A faux select box for Ember apps
MIT License
64 stars 14 forks source link

Keyboard support #3

Closed billdami closed 8 years ago

billdami commented 8 years ago

Would love to see more robust keyboard control support for this, seems like the Single select example has some, although it appears to be a bit buggy (when switching between mouse and keyboard selection, movement between items with the arrow keys is sometimes incorrect, arrow key selection also causes the window to scroll). However, the Filter select and Search select examples do not look like they have any keyboard support (pressing the down arrow from the input box does not allow me to select from the available options like I would expect).

amk221 commented 8 years ago

Hi, thanks for the feedback.

The demo page includes rudimentary examples. (It's up to you as the developer to make a select box that behaves how you want). If you wanted a keyboard-navigatable select box then you would want to preventDefault on the up/down events, for example:

{{select-box on-press-up=(action 'pressedUp')}}
pressedUp(e, sb) {
  e.preventDefault();
  sb.activatePreviousOption(); // send in true to also scroll the element into view
}

Because it makes sense to, I will update the demos so the window doesn't scroll. But I don't think preventingDefault by default is the right way to go... ember-select-box is essentially providing you with the tools to create your own select box, rather than dictating what should happen all the time.

With regards to the buggy behaviour - I think what you might be experiencing comes from leaving the mouse cursor over the select box. When this happens. if you use the keyboard to move down the browser will then try to move up because of where you left your mouse. I'm not aware of a fix for that - If you see others like jQuery Select2, you will see the same thing happening there:

screen recording 2016-02-17 at 03 18 pm

amk221 commented 8 years ago

@billdami Do you have any more comments on this? (closing if not)