ComboBox in IE and FF

Vaadin 6 / 7 / 8 Framework UI
1

I am playing around with the combo box in the Vaadin UI and found that I am not able to use the ComboBox component added newly to the Vaadin rightly. I have a a map of elements which are used to display the elements in the drop down or combo box. The IE and FF both are displaying a text cursor when the combobox is clicked. But it is diisplayed properly in chrome. I have tried using setTextInputAllowed(false); Please can someone tell me where I am going wrong?

2

Is it true that the FF and IE have a bug - displays a cursor even if the field is read only? What is the best work around for this in vaadin?

3

Can you post any sample code with this problem?

4

Hello,

Sure here is the code:

	@Override
	public void init() {
		Window mainWindow = new Window("Combobox Application");

	    List<Example> examples = new ArrayList<Example>();
	    examples.add(new Example(new Integer(1), "First description"));
	    examples.add(new Example(new Integer(2), "Second description"));
	    examples.add(new Example(new Integer(3), "Third description"));
	    BeanItemContainer<Example> objects = new BeanItemContainer<Example>(Example.class, examples);

	    ComboBox combo = new ComboBox("Example", objects);
	    combo.setMultiSelect(false);	    
	    combo.setFilteringMode(ComboBox.FILTERINGMODE_OFF);

	    combo.setInputPrompt(null);
	    combo.setNewItemsAllowed(false);
	    combo.setWriteThrough(false);
	    combo.setItemCaptionPropertyId("description");
	    combo.setValidationVisible(false);
	    combo.setTextInputAllowed(false);
	    combo.setScrollToSelectedItem(false);
	    
	    mainWindow.addComponent(combo);
	    setMainWindow(mainWindow);
	}
	
	public class Example {

	    private Integer id;
	    private String description;

	    public Example(Integer id, String description) {
	        this.id = id;
	        this.description = description;
	    }

	    public Integer getId() {
	        return id;
	    }
	    public void setId(Integer id) {
	        this.id = id;
	    }
	    public String getDescription() {
	        return description;
	    }
	    public void setDescription(String description) {
	        this.description = description;
	    }
	}

On chrome and opera it works fine but I wonder why it does not work on FF and IE (8 and 9). On IE8 input cursor keeps flashing and on FF it remains still.

5

When I tried this on FF (Version 12) it is working and I don’t see any problems.
Sorry, can’t comment on IE, I don’t use Windows/IE.

Also, you don’t need BeanItemContainer here unless you have other reasons to use it:


	@Override
	public void init() {
		Window mainWindow = new Window("Combobox Application");

		List<Example> examples = new ArrayList<Example>();
		examples.add(new Example(new Integer(1), "First description"));
		examples.add(new Example(new Integer(2), "Second description"));
		examples.add(new Example(new Integer(3), "Third description"));

		ComboBox combo = new ComboBox("Example", examples);
		combo.setMultiSelect(false);
		combo.setFilteringMode(ComboBox.FILTERINGMODE_OFF);

		combo.setInputPrompt(null);
		combo.setNewItemsAllowed(false);
		combo.setWriteThrough(false);
		combo.setValidationVisible(false);
		combo.setTextInputAllowed(false);
		combo.setScrollToSelectedItem(false);

		mainWindow.addComponent(combo);
		setMainWindow(mainWindow);
	}

	public class Example {

        private Integer id;
        private String description;

        public Example(Integer id, String description) {
            this.id = id;
            this.description = description;
        }

        public Integer getId() {
            return id;
        }

        public void setId(Integer id) {
            this.id = id;
        }

        public String getDescription() {
            return description;
        }

        public void setDescription(String description) {
            this.description = description;
        }

        @Override
		public String toString() {
        	return description;
        }
    }
6

I have run the application on Firefox 13. The cursor is displayed! What am I missing? I see a flickering cursor in IE

7

I have now ended up using NativeSelect. It works okay and the cursor problem is gone. Is there any other solution?