Tab through components in a modal dialog not working

Hi guys, I’m struggling to get this to work.

When opening a modal window and tab through the components in the window, the focus doesn’t start at the first component again when reaching the last component.

This also happens in the sampler demo at
http://demo.vaadin.com/sampler/#ui/structure/window

In the sampler demo, set the window to modal and tab through the components.
When not in modal mode, you can see the focus moving to different components behind the window.

Version: 7.6.6

Tested on browsers:
Chrome Version 50.0.2661.102 (64-bit)
Firefox 46.0.1

I have had a similar paroblem in past versions of Vaadin as well. Also, when the modal dialog opened, I wouldn’t receive focus in the first field. My solution for this was quite simple.

First, I created a function grabFocus() in the window which put focus on the first item.
Next, I opened the window in a fashion similar to the following:

final MyWindow window = new MyWindow(); UI.getCurrent().addWindow(window); window.addFocusListener(new FieldEvents.FocusListener() { @Override public void focus(FieldEvents.FocusEvent focusEvent) { window.grabFocus(); } }); Last, I put a ShortcutListener on the last item in my window listening for the TAB key that redirected focus back to the first item.

Probably not the best solution, but it works great. I use it throughout my applications.