FlexibleOptionGroup: Caption is duplicated when used in a form.

I am new to Vaadin. I have a problem and hoped someone could point me in the right direction.

I am trying to use a FlexibleOptionGroup in a form. My problem is that it does not render correctly. I wanted something like (Capital O = radio button):

O day of month O day of week

Instead I get:

day on monthday of week O day of month O day of week

Can anyone explain why the extra text is appearing?

The radio buttons that appear seem to be bound correctly to the bean property so everything appears to work except for the extra text.

Below is a shortened version of the code. … = missing code. Hopefully this is enough to give you a better idea what crazy thing I am trying to do.



public class MyForm extends Form {
private final GridLayout mainLayout;
private final HorizontalLayout repeatByLayout = new HorizontalLayout();

public MyForm() {

mainLayout = new GridLayout(2, 7);
mainLayout.addComponent(repeatByLayout, 1, 2);


protected void attachField(Object propertyId, Field field) {
    } else if (propertyId.equals("by")) {
        addRepeatByComponents((FlexibleOptionGroup) field);

private void addRepeatByComponents(FlexibleOptionGroup repeatBy) {
    Iterator<FlexibleOptionGroupItemComponent> radioButtons = repeatBy.getItemComponentIterator();
    while (radioButtons.hasNext()) {
        FlexibleOptionGroupItemComponent fogButton = radioButtons.next();
        repeatByLayout.addComponent(new Label(fogButton.getCaption()));


private class MyFieldFactory extends DefaultFieldFactory {
private final List repeatByOptions = Arrays.asList(“day of the month”, “day of the week”);
private final FlexibleOptionGroup repeatBy = new FlexibleOptionGroup(repeatByOptions);

public Field createField(Item item, Object propertyId, Component uiContext) {

} else if (“by”.equals(propertyId)) {
f = repeatBy;



I thought I found a fix. If I call setVisibleItemProperties before setItemDataSource in the constructor of my form the duplicated text problem goes away but I also lose the ordering specified with setVisibleItemProperties. I am a bit confused still why it only affected the label added with the line:

repeatByLayout.addComponent(new Label(fogButton.getCaption()));

and not any other component. When calling setItemDataSource before setVissibleItemProperties the attachField method is called twice.

Anyone know of a way to make this work without the duplicated text and still keep the order?

The easy way: use setItemDataSource(item, propertyIds) instead of calling the two methods separately.

When using Form without overriding attachField() etc. the form takes care or removing fields before adding new ones. When customizing this, your attachField() needs to remove the old component before adding a new one. The easiest way to manage this would probably be to keep a reference to the components you have already added and reuse them instead of adding new copies, although depending on the case, there may be several other alternatives available.

If I had to use a FlexibleOptionGroup inside a Form, I would wrap it inside a
. Then the createField method of FormFieldFactory just returns the CustomField and all code related to the FOP is inside the wrapping class.