Tab out of select field

[SimeonC]

This is a bug with #92.

Steps

1. Click to open field - so it shows the input field for searching.
2. Press TAB
3. ui-select is still active field.

Problem
Step 3 should be that the next tabbable input should be focussed.

Fix
I think the fix for this is to do with the tabindex attribute. Currently we have 2 inputs, the tabindex="-1" input used for searching (search input) and the other one we use for detecting tab order (tab input) has class .ui-select-offscreen.
The solution I think is as follows:

1. Click to open field - Triggers a focus for the 'search input' field.
2. The 'search input' field has it's tabindex attribute set to that of the 'tab input'
3. The 'tab input' field should have it's tabindex attribute set to -1.
   4 On 'search input' blur (item selected/tab out etc) return the tabindex to what they originally were.

[dimirc]

yes, I did saw this problem too. I think that a solution could be to just set to disabled the focusser input when the the dropdown is open, that way tha TAB won't return to the control but to the next one (then we could activate it back after the dropdown is closed)

[dimirc]

@SimeonC this should be solved now with #127
Will be perfect if you could give a hand writing some tests for this feature thought

[SimeonC]

Nice! I'll see if I can come up with something.

[SimeonC]

In looking around the web it looks like we can't accurately test this - the browsers don't allow you to trigger the default behaviour of the 'tab' keypress meaning I can't test this without some really hacky tab simulation that I'm pretty sure won't test correctly anyway.

[SimeonC]

Actually, ran into this: https://groups.google.com/forum/#!msg/phantomjs/OtLvfFDsy-o/WiIIcBh84rgJ
When I get some time again I'll see if we can test this via phantomjs.

[cheahkhing]

Hi, I tried with using the latest ui-select, it seems like the behaviour is not fixed.
Whenever I dropdown with arrow keys, then press "Tab", it won't navigate to the next select, instead it will just stays on the same select. :/
The plunker created by someone here also shows this problem: http://plnkr.co/edit/DWpNaLT0AdsdRBvELynD?p=preview
Anyone can get this working?

[dimirc]

@cheahkhing I just checked and it's broken (possible with all the changes when implementing muti select). Anyway it should be fix very soon with #286

[marcievanauken]

Hi - this is still broken. Any updates?

[kristerd]

It seems like this still is broken on 18.0?

[johanroug]

Any news here. Still an issue

[julienrott]

Based on https://github.com/angular-ui/ui-select/issues/1544
I use this to focus out when tab key is pressed in multiple ui-select :

    angular.module('myModule')
        .directive('uiSelectCloseOnTab', uiSelectCloseOnTab);

    function uiSelectCloseOnTab() {
        return {
            require: 'uiSelect',
            link: function(scope, element, attrs, $select) {
                var that = this;
                var searchInput = element.querySelectorAll('input.ui-select-search');
                if(searchInput.length !== 1) throw Error("bla");

                searchInput.on('keydown', {select: $select}, function(event) {
                    if(event.keyCode == 9) {
                        event.data.select.close();
                        event.data.select.setFocus();
                    }
                });
            }
        };
    }