No focus loss

[thers]

So when you've got many selects in row and tabbing through them they ain't loses focus. Also when SoD select catch the focus and you switch value by arrows or holding some keys on keyboard and then you tab to the next field selected value is still selected, but if you just click somewhere value returns to the previous state. In the last case only pressing enter will actually set the selected value.

Here is a gif to illustrate this issue. Red border color is set only for .sod_select.focus

[vestman]

Thanks for the info! I'll take a look at the focus issue tomorrow.

Regarding the issue where you need to press enter to have the option selected, that's intended. If you take a look at http://vst.mn/tmp/select.html in Chrome. Tab to the select and then use your arrown keys, when you click outside of the select it will go back to the default option. Firefox behaves the other way around, when you use your arrow keys and then click outside of the select it will keep the option selected with the arrow keys selected. I choose to "mimic" Chrome, don't know if that decision was good or not.

Any way, I'll get back to you regarding the focus bug.

[vestman]

Sorry, now I read your comment again. I'll take a look at the tab vs. click also!

[thers]

I tested only in Chrome, and in your select demo (http://vst.mn/tmp/select.html) Chrome acts as expected, changing value using arrows will immediately select the value and if you click outside value will not resetted to previous/default. Checked in a last Firefox, it behaves the same way as Chrome, i bet last Opera will do the same. Also checked IE 10, same behavior :)

[thers]

Also 'no focus loss' affects only style of elements, space/arrows/keys works as expected.

[vestman]

Below are two screen captures, one using Chrome and one using Firefox. I do the same thing in both examples:

1. Click the select
2. Change option using my arrow keys
3. Click outside the select using the mouse

In Chrome, Safari and Opera I get the result seen in this[1] video, when clicking outside the select it falls back to the value initially selected. In Firefox and IE10 and IE11 I get the result seen in this[2] video, when clicking outside the select the option selected using the arrow keys stays selected.

Is this the same behavior you see?

[1] - http://f.cl.ly/items/373z03131x0x1j1B0809/select_chrome.mp4 [2] - http://f.cl.ly/items/2G2W1o1I0l1W2S1Q2Y0p/select_firefox.mp4

[vestman]

Closing this for now. If you're not happy with the current behavior just let me know and we'll figure something out.

[thers]

Now i got your point, you open list using a click on it, but i meant situation, when select field is in focus (using label or 'tab' from previous field), but is not open, just like in my GIF. And, suddenly, behavior i am talking about doesn't changed. So the whole difference is that in your case select options list is open, in my case it is closed. When select options list is closed all browsers behave the same way:

1. Focus on field by using click on label or tab from another field
2. Change option using arrow keys or symbol keys (like when you holding AFG the Afganistan option will be selected)
3. Remove focus by clicking outside or tab to another field and selected option will not be resetted

[thers]

I meant that navigation through the options using keyboard should differ for case when options are shown and case when they are not shown.

[vestman]

Thanks for the detailed explanation!

I just committed some changes. Download any of the .js files here https://github.com/vestman/Select-or-Die/tree/master/_src and give it a try... (you might need to download the CSS also since I made changes to it yesterday in regards of issue #5)

[thers]

Great, seems fixed to me (both issues), thanks a lot :)