Tabs keyboard navigation with tab removals

[magoomby]

In your tabs demo, if I click on tab SEVEN then use the left/right keyboard keys to highlight other tabs, it will scroll to tab headings on the right, but not on the left.

Recreate problem

1. Go to TABS demo, (Dynamic tabs)
2. click on tab FOUR and remove it
3. scroll the tabs to the right and select tab SEVEN
4. since the focus is now on tab heading SEVEN, use the right key to highlight tabs EIGHT, NINE and TEN (accessibility)
5. now, still only using the keyboard, use the left key to highlight tabs NINE, EIGHT, SEVEN, SIX, FIVE... at this point the focus indicator (dotted lines) is continuing to highlight tabs 5,3,2,1, but the headings before SIX are not scrolled into view.

Just in case it is browser specifiec, I've tried

Safari 8 - the tab heading focus doesn't change in either direction, click on dynamic tab SEVEN and use the keyboard left/right... nothing
Chrome 38 - no problem of course
Firefox 33.1 - this is the problem as described above
IE - sorry, using OS X for dev work, haven't got VMWare running at the moment.

Any thoughts?

[ajoslin]

Firefox doesn't support the focusin event. And it also seems it doesn't support a way of canceling focus, even if you call blur() or preventDefault() on the focus event.

So we had to do this:

        // If the focused element is on a new page, don't focus yet.
        tab.element.blur();
        // Firefox doesn't support synchronously stopping focus, so we have
        // to do it asynchronously there...
        setTimeout(function() {
          tab.element.blur();
        });

It still causes a small visual glitch in Firefox, but it's hard to notice.

Hopefully Mozilla will add support for focusin and focusout soon, then we won't have to do anything.

[ajoslin]

Reverted the fix for now, needs a more in-depth solution.

[ThomasBurleson]

👍

[ajoslin]

OK, created an actual solution this time. And it's actually very simple.