Unresponsive optionGroup inside a form with Chrome

Hi guys,

While adding some optionGroups inside a formLayout, i came accross a strange behavior. The selectors do
not seem to respond at the user input, and it requires 7-8 clicks to start responding. (Vaddin 7.3.3 ,Valotheme)

Note the unresponsiveness occurs with Google Chrome , at Internet Explorer and Mozilla Firefox everything
works fine.

Made a simple test, but it seems to work here. Could you provide an example?

Sure,

I use a modal to display and edit some object’s attributes. Inside this modal i have a formLayout with various components ,among them the aforementioned optionGroups.

Thank you for your time,
let me know if you need anything else.

Hey Yanis,

I don’t seem to be able to reproduce this issue. I create a modal window, set a FormLayout as the content and add OptionGroup components to the form… but it works as intended here.

Could you post a runnable code example?

Here is my class, my main concert is that everything works ok at all the browsers except Google Chrome.

public class EmployeeDetailModal extends Window {
private OptionGroup primaryPositionOptionGroup,secondaryPositionsOptionGroup;

public EmployeeDetailModal(final Integer empId, Item empItem,
        final int sectorId, final EmployeeService employeeService,
        final PositionService positionService) {

    center();
    setWidth("600px");
    setModal(true);
    setResizable(true);
    
    VerticalLayout modalLayout = new VerticalLayout();
    Label label = new Label("Επεξεργασία Εργαζομένου");
    label.addStyleName(ValoTheme.LABEL_COLORED);

    final Employee employee = employeeService.getEmployeeById(empId);
    FormLayout formContent = new FormLayout();
    formContent.addStyleName(ValoTheme.FORMLAYOUT_LIGHT);
    
    formContent.setImmediate(true);
    
    formContent.addComponent(label);
    formContent.setComponentAlignment(label, Alignment.MIDDLE_LEFT);
    formContent.setWidth("596px");
    formContent.setSizeUndefined();

    final FieldGroup fieldGroup = new FieldGroup(empItem);
    fieldGroup.setBuffered(false);
    Field id = fieldGroup.buildAndBind("Κωδικός", Constants.EMPLOYEE_ID);
    id.addStyleName(ValoTheme.TEXTFIELD_SMALL);
    id.setReadOnly(true);
    formContent.addComponent(id);
    
    Field lname = fieldGroup.buildAndBind("Επώνυμο",Constants.EMPLOYEE_LNAME);
    lname.addStyleName(ValoTheme.TEXTFIELD_SMALL);
    lname.setReadOnly(true);
    formContent.addComponent(lname);

    Field fname = fieldGroup.buildAndBind("Όνομα", Constants.EMPLOYEE_FNAME);
    fname.addStyleName(ValoTheme.TEXTFIELD_SMALL);
    fname.setReadOnly(true);
    formContent.addComponent(fname);

    ComboBox gender = fieldGroup.buildAndBind("Φύλο",Constants.EMPLOYEE_GENDER, ComboBox.class);
    gender.addStyleName(ValoTheme.COMBOBOX_SMALL);
    gender.setReadOnly(true);
    formContent.addComponent(gender);

    // Editable
    final TextField workDays =fieldGroup.buildAndBind("Εργάσιμες",Constants.EMPLOYEE_CONTRACT_WORK_DAYS, `TextField.class);
    workDays.setNullRepresentation("");
    workDays.addStyleName(ValoTheme.TEXTFIELD_SMALL);
    workDays.setReadOnly(false);
    formContent.addComponent(workDays);

    final TextField shiftDuration = fieldGroup.buildAndBind("Διάρκεια Βάρδιας (h)",Constants.EMPLOYEE_CONTRACT_SHIFT_DURATION,TextField.class);
    shiftDuration.setNullRepresentation("");
    shiftDuration.addStyleName(ValoTheme.TEXTFIELD_SMALL);
    shiftDuration.setReadOnly(false);
    formContent.addComponent(shiftDuration);

    final TextField maxShift = fieldGroup.buildAndBind("Μέγιστη Απασχόληση (h)",Constants.EMPLOYEE_MAX_OVERTIME,TextField.class);
    maxShift.setNullRepresentation("");
    maxShift.addStyleName(ValoTheme.TEXTFIELD_SMALL);
    maxShift.setReadOnly(false);
    formContent.addComponent(maxShift);

    Label shiftLabel = new Label("Επιλέξιμα Πόστα");
    shiftLabel.addStyleName(ValoTheme.LABEL_COLORED);
    formContent.addComponent(shiftLabel);
    
    final List<Position> sectorPositions=positionService.getActivePositionsBySector(sectorId);
    primaryPositionOptionGroup=new OptionGroup("Πρωτεύον Πόστο");
    for(Position pos : sectorPositions){
        primaryPositionOptionGroup.addItem(pos.getName());
    }
    primaryPositionOptionGroup.setMultiSelect(false);
    primaryPositionOptionGroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
    primaryPositionOptionGroup.setImmediate(true);
    primaryPositionOptionGroup.select(employee.getPrimaryPosition().getName());
    primaryPositionOptionGroup.setNullSelectionAllowed(false);
    formContent.addComponent(primaryPositionOptionGroup);
    secondaryPositionsOptionGroup=new OptionGroup("Δευτερεύον Πόστο");
    secondaryPositionsOptionGroup.setImmediate(true);
    for(Position pos : sectorPositions){
        secondaryPositionsOptionGroup.addItem(pos.getName());
    }
    secondaryPositionsOptionGroup.setMultiSelect(true);
    secondaryPositionsOptionGroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
    secondaryPositionsOptionGroup.setImmediate(true);
    primaryPositionOptionGroup.setNullSelectionAllowed(true);
    for(Position pos :employee.getSecondaryPositions()){
        secondaryPositionsOptionGroup.select(pos.getName());
    }
    secondaryPositionsOptionGroup.removeItem(employee.getPrimaryPosition().getName());
    primaryPositionOptionGroup.addValueChangeListener(new ValueChangeListener() {
        @Override
        public void valueChange(ValueChangeEvent event) {
            
            secondaryPositionsOptionGroup.removeAllItems();
            for(Position pos : sectorPositions){
                secondaryPositionsOptionGroup.addItem(pos.getName());
            }
            for(Position pos :employee.getSecondaryPositions()){
                secondaryPositionsOptionGroup.select(pos.getName());
            }
            secondaryPositionsOptionGroup.removeItem((String)event.getProperty().getValue());
        }
    });
    formContent.addComponent(secondaryPositionsOptionGroup);

    HorizontalLayout actionContent = new HorizontalLayout();
    Button saveButton = new Button();
    saveButton.setCaption("Καταχώρηση");
    saveButton.setWidth("150px");
    saveButton.addStyleName(ValoTheme.BUTTON_SMALL);
    saveButton.addClickListener(new ClickListener() {
        @Override
        public void buttonClick(ClickEvent event) {
            Map<String,Position>mappedPositions=positionService.getMappedActivePositionsBySector(sectorId);
            if(shiftDuration.getValue()!=null && !shiftDuration.getValue().isEmpty())
                employee.setContractShiftDuration(Integer.parseInt(shiftDuration.getValue()));
            if(workDays.getValue()!=null && !workDays.getValue().isEmpty())
                employee.setContractWorkingDays(Integer.parseInt(workDays.getValue()));
            if(maxShift.getValue()!=null && !maxShift.getValue().isEmpty())
                employee.setMaxOvertime(Integer.parseInt(maxShift.getValue()));
            List<Position>secondaryPos=new ArrayList<Position>();
            for (String positionName : (Set<String>)secondaryPositionsOptionGroup.getValue()) {
                secondaryPos.add(mappedPositions.get(positionName));
            }
            employeeService.saveEmployeeWithPositions(employee, mappedPositions.get(primaryPositionOptionGroup.getValue()),secondaryPos);
            close();
        }
    });
    Button cancelButton = new Button();
    cancelButton.addStyleName(ValoTheme.BUTTON_SMALL);
    cancelButton.setCaption("Ακύρωση");
    cancelButton.setWidth("150px");
    cancelButton.addClickListener(new ClickListener() {
        public void buttonClick(ClickEvent event) {
            fieldGroup.discard();
            close();
        }
    });
    actionContent.addComponent(saveButton);
    actionContent.addComponent(cancelButton);
    actionContent.setSpacing(true);
    actionContent.setSizeUndefined();
    modalLayout.setSizeUndefined();
    modalLayout.setSpacing(true);
    modalLayout.addComponent(formContent);
    modalLayout.addComponent(actionContent);
    modalLayout.addComponent(new Label(""));
    modalLayout.setComponentAlignment(actionContent,Alignment.BOTTOM_CENTER);
    setContent(modalLayout);
}

}

I ran your code, obviously with some changes, and tested it in Chrome 38.0.2125.111 without any problems. :confused:

Thanks a million for your time,

I’ll update if i have any news.

Found a ticket about this behaviour
http://dev.vaadin.com/ticket/15125#ticket

Interesting… I ran that code and had no issues. But good that it’s been reported. Lets see if anybody else experiences the same problem.