Using TokenField Inside PopupButton Layout

I am trying to put a TokenField add-on inside of a VerticalLayout that appears when I click a PopupButton. The TokenField is added; however, most of the time I am not able to focus the field to get a cursor in it. Occasionally, if the field does get focused, I am unable to actually enter any input into the field. If a data source is set, pressing the down arrow does not bring up the the options like it should. I have tried using the TokenField elsewhere in my UI and it seems to be working as expected.

Here’s a minimal example of something I believe should work, but doesn’t:

PopupButton button = new PopupButton();
TokenField field = new TokenField();
Layout layout = new VerticalLayout();

I have tried several other ways of doing this as well, including adding the TokenField to a Panel rather than a Layout, and also just doing:

button.setContent(new TokenField()); Everything I have tried ends up resulting in the same issues I have described above.

Can anyone provide a working code sample of what I am trying to accomplish? I have attached a picture in case my description wasn’t clear.

I am using Vaadin 7.1.1

After doing some more testing, I realized that the problem was that I was trying to do this in a modal window. Removing the modal attribute seemed to fix it (however the selected tokens are not rendered correctly). I do need this window to be modal, so if someone could provide a workaround, that would be great.


I believe this is exactly due to the modal window and how the events are handled there. I think the core issue is that the modal window checks that events are happening within it, and it does not recognize that the popup of PopupButton is actually a “part” of the modal window.

I’m not sure if this is actually a bug in Vaadin or in the PopupButton add-on. At first you might want to check the
PopupButton thread
and report the issue there.

As far as I know there is currently no workaround for this issue.

Thank you Teppo.