ComboBox is not displayed

Hi guys!
I have pretty odd problem. When I add combobox to layout - I can see NOTHING in browser.
Below is code adding it to layout:

    private ComboBox<String> testBox = new ComboBox<>();

	public TestView () {
	
		testBox.setItems("Test 1", "Test 2", "Test 3");
        testBox.setValue("Test 2");
        testBox.setWidthFull();
        testBox.setClearButtonVisible(true);
        testBox.setRequired(true);
        testBox.setReadOnly(false);
        testBox.setLabel("TESTBOX");
        testBox.setVisible(true);

        Div testBoxDiv = new Div();
        testBoxDiv.setSizeFull();
        testBoxDiv.add(testBox);



        splitLayout.addToSecondary(testBoxDiv);
	}

I tried almost everything to make it shown.

Guys, please help - what am I misssing here???

Thanx!

Hi,

your code seems fine to me.:slight_smile: Did you remember to add the splitLayout to your UI as well? Do you see any errors in your server or browser console?

Could you also post the whole route that we could try to verify problem on our side?

Best regards,

Anastasia

Here is full class code.
Some lines commented out because I’m trying to make combobox works 1st.

@Route(value = "Search-Hero", layout = MainView.class)
@PageTitle("Search Hero")
@CssImport("styles/views/searchhero/search-hero-view.css")
@SpringComponent
public class SearchHeroView extends Div implements AfterNavigationObserver {

    private final SearchHeroService searchHeroService;
    private final CountyService countyService;
    private final ListingService listingService;

    private Grid<SearchHero> grid;

    //Editor fields
    private TextField title = new TextField();
    private TextArea description = new TextArea();
//    private ComboBox<Listing> listing = new ComboBox<>();
//    private ComboBox<County> county = new ComboBox<>();
    private ComboBox<String> testBox = new ComboBox<>();

    private Button cancelBtn = new Button("Cancel");
    private Button saveBtn = new Button("Save");
    private Button newBtn = new Button("New");
    private Button deleteBtn = new Button("Delete");

    private Binder<SearchHero> binder;

    public SearchHeroView(SearchHeroService searchHeroService, CountyService countyService, ListingService listingService) {
        this.searchHeroService = searchHeroService;
        this.countyService = countyService;
        this.listingService = listingService;
        setId("search-hero-view");
        // Configure Grid
        grid = new Grid<>();
        grid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
        grid.setHeightFull();
        grid.addColumn(SearchHero::getId).setHeader("ID").setWidth("10%");
        grid.addColumn(SearchHero::getTitle).setHeader("Title");
        grid.addColumn(SearchHero::getDescription).setHeader("Description");
        grid.addColumn(searchHero -> { //
            Listing l = searchHero.getListing();
            return l == null ? "-" : l.getDescription();
        }).setHeader("Listing Description");
        grid.addColumn(searchHero -> { //
            County c = searchHero.getCounty();
            return c == null ? "-" : c.getName();
        }).setHeader("County");

        //when a row is selected or deselected, populate form
        grid.asSingleSelect().addValueChangeListener(event -> populateForm(event.getValue()));

        // the grid valueChangeEvent will clear the form too
        cancelBtn.addClickListener(e -> grid.asSingleSelect().clear());

        saveBtn.addClickListener(e -> {
            saveBtnClick();
        });

        newBtn.addClickListener(e -> {
            newBtnClick();
        });

//        county.setDataProvider(this.countyService::fetch, this.countyService::count);
//        county.setItems(this.countyService.fetch("", 0, Integer.MAX_VALUE));
//        listing.setDataProvider(this.listingService::fetch, this.listingService::count);

        // Configure Form
        binder = new Binder<>(SearchHero.class);
        // Bind fields. This where you'd define e.g. validation rules
        binder.bindInstanceFields(this);

        SplitLayout splitLayout = new SplitLayout();
        splitLayout.setSizeFull();

        createGridLayout(splitLayout);
//        createEditorLayout(splitLayout);

        add(splitLayout);

        testBox.setItems("Test 1", "Test 2", "Test 3");
        testBox.setValue("Test 2");
        testBox.setWidthFull();
        testBox.setClearButtonVisible(true);
        testBox.setRequired(true);
        testBox.setReadOnly(false);
        testBox.setLabel("TESTBOX");
        testBox.setVisible(true);

        Div testBoxDiv = new Div();
        testBoxDiv.setSizeFull();
        testBoxDiv.add(testBox);



        splitLayout.addToSecondary(testBoxDiv);
    }

    private void createEditorLayout(SplitLayout splitLayout) {
        Div editorDiv = new Div();
        editorDiv.setId("editor-layout");
        FormLayout formLayout = new FormLayout();
        addFormItem(editorDiv, formLayout, title, "Title");
        addFormItem(editorDiv, formLayout, description, "Description");
//        addFormItem(editorDiv, formLayout, testBox, "TB");
//        addFormItem(editorDiv, formLayout, listing, "Listing");
//        addFormItem(editorDiv, formLayout, county, "County");
        createButtonLayout(editorDiv);
        splitLayout.addToSecondary(editorDiv);
    }

    private void createButtonLayout(Div editorDiv) {
        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setId("button-layout");
        buttonLayout.setWidthFull();
        buttonLayout.setSpacing(true);
        cancelBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
        saveBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        newBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        deleteBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        buttonLayout.add(cancelBtn, saveBtn, newBtn, deleteBtn);
        editorDiv.add(buttonLayout);
    }

    private void createGridLayout(SplitLayout splitLayout) {
        Div wrapper = new Div();
        wrapper.setId("wrapper");
        wrapper.setWidthFull();
        splitLayout.addToPrimary(wrapper);
        wrapper.add(grid);
    }

    private void addFormItem(Div wrapper, FormLayout formLayout,
            AbstractField field, String fieldName) {
        formLayout.addFormItem(field, fieldName);
        wrapper.add(formLayout);
        field.getElement().getClassList().add("full-width");
    }

    @Override
    public void afterNavigation(AfterNavigationEvent event) {

        // Lazy init of the grid items, happens only when we are sure the view will be
        // shown to the user
        updateGrid();
    }

    private void updateGrid() {
        grid.setItems(searchHeroService.get(PageRequest.of(0, Integer.MAX_VALUE)).getContent());
    }

    private void populateForm(SearchHero value) {
        // Value can be null as well, that clears the form
        binder.readBean(value);
    }

    private void newBtnClick() {
        populateForm(new SearchHero());
    }

    private void saveBtnClick() {
        final SearchHero selectedSearchHero = grid.asSingleSelect().getValue();
        selectedSearchHero.setDescription(description.getValue());
        selectedSearchHero.setTitle(title.getValue());

        searchHeroService.createOrUpdate(selectedSearchHero);
        updateGrid();
    }
}

Anastasia Smirnova:
Hi,

your code seems fine to me.:slight_smile: Did you remember to add the splitLayout to your UI as well? Do you see any errors in your server or browser console?

I added splitLayout before adding Comnbobox.
No errors was found in both server & browser console.

Very odd issue.
Placing simple combobox makes process real massacre. And NO any hint why it is NOT showing :frowning:

Thanx for paying attention to my problem :slight_smile:

Unfortunately, I can’t copy-paste your code as you have custom classes there. I’ve tried to reproduce the behaviour and in the code below it seems to be working fine. How much space does grid occupy? could you share a screenshot of your view or simplify the example so I could try it locally?
Thanks in advance :slight_smile:


import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.router.Route;

@Route("splitLayoutTest")
public class SplitLayoutView extends VerticalLayout {

    public SplitLayoutView(){

        SplitLayout layout=new SplitLayout();
        layout.setSizeFull();
        add(layout);

        Div primary=new Div();
        primary.add(new Label("primary1"));
        primary.setSizeFull();
        layout.addToPrimary(primary);
        layout.addToSecondary(new Label("Secondary 1"));
        ComboBox<String> testBox=new ComboBox<>();
        testBox.setItems("Test 1", "Test 2", "Test 3");
        testBox.setValue("Test 2");
        testBox.setWidthFull();
        testBox.setClearButtonVisible(true);
        testBox.setRequired(true);
        testBox.setReadOnly(false);
        testBox.setLabel("TESTBOX");
        testBox.setVisible(true);

        Div testBoxDiv = new Div();
        testBoxDiv.setSizeFull();
        testBoxDiv.add(testBox);
        layout.addToSecondary(testBoxDiv);
    }
}

Here is class without any outer inclusions.

package ie.realli.web.adminpanel.views.searchhero;

import com.vaadin.flow.component.AbstractField;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.GridVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.splitlayout.SplitLayout;
import com.vaadin.flow.component.textfield.TextArea;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.spring.annotation.SpringComponent;

@Route(value = "TestView")
@PageTitle("TestView")
@SpringComponent
public class TestView extends VerticalLayout {

    private Grid<TestRow> grid;

    //Editor fields
    private TextField title = new TextField();
    private TextArea description = new TextArea();
    private ComboBox<String> testBox = new ComboBox<>();

    private Button cancelBtn = new Button("Cancel");
    private Button saveBtn = new Button("Save");
    private Button newBtn = new Button("New");
    private Button deleteBtn = new Button("Delete");

    private Binder<TestRow> binder;

    public TestView() {
        setId("test-view");
        // Configure Grid
        grid = new Grid<>();
        grid.addThemeVariants(GridVariant.LUMO_NO_BORDER);
        grid.setHeightFull();
        grid.addColumn(TestRow::getId).setHeader("ID").setWidth("10%");
        grid.addColumn(TestRow::getTitle).setHeader("Title");
        grid.addColumn(TestRow::getDescription).setHeader("Description");


        //when a row is selected or deselected, populate form
        grid.asSingleSelect().addValueChangeListener(event -> populateForm(event.getValue()));

        // the grid valueChangeEvent will clear the form too
        cancelBtn.addClickListener(e -> grid.asSingleSelect().clear());

        saveBtn.addClickListener(e -> {
            saveBtnClick();
        });

        newBtn.addClickListener(e -> {
            newBtnClick();
        });

//        county.setDataProvider(this.countyService::fetch, this.countyService::count);
//        county.setItems(this.countyService.fetch("", 0, Integer.MAX_VALUE));
//        listing.setDataProvider(this.listingService::fetch, this.listingService::count);

        // Configure Form
        binder = new Binder<>(TestRow.class);
        // Bind fields. This where you'd define e.g. validation rules
        binder.bindInstanceFields(this);

        SplitLayout splitLayout = new SplitLayout();
        splitLayout.setSizeFull();

        createGridLayout(splitLayout);
//        createEditorLayout(splitLayout);

        add(splitLayout);

        testBox.setItems("Test 1", "Test 2", "Test 3");
        testBox.setValue("Test 2");
        testBox.setWidthFull();
        testBox.setClearButtonVisible(true);
        testBox.setRequired(true);
        testBox.setReadOnly(false);
        testBox.setLabel("TESTBOX");
        testBox.setVisible(true);

        Div testBoxDiv = new Div();
        testBoxDiv.setSizeFull();
        testBoxDiv.add(testBox);


        splitLayout.addToSecondary(testBoxDiv);
    }

    private void createEditorLayout(SplitLayout splitLayout) {
        Div editorDiv = new Div();
        editorDiv.setId("editor-layout");
        FormLayout formLayout = new FormLayout();
        addFormItem(editorDiv, formLayout, title, "Title");
        addFormItem(editorDiv, formLayout, description, "Description");
//        addFormItem(editorDiv, formLayout, testBox, "TB");
//        addFormItem(editorDiv, formLayout, listing, "Listing");
//        addFormItem(editorDiv, formLayout, county, "County");
        createButtonLayout(editorDiv);
        splitLayout.addToSecondary(editorDiv);
    }

    private void createButtonLayout(Div editorDiv) {
        HorizontalLayout buttonLayout = new HorizontalLayout();
        buttonLayout.setId("button-layout");
        buttonLayout.setWidthFull();
        buttonLayout.setSpacing(true);
        cancelBtn.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
        saveBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        newBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        deleteBtn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        buttonLayout.add(cancelBtn, saveBtn, newBtn, deleteBtn);
        editorDiv.add(buttonLayout);
    }

    private void createGridLayout(SplitLayout splitLayout) {
        Div wrapper = new Div();
        wrapper.setId("wrapper");
        wrapper.setWidthFull();
        splitLayout.addToPrimary(wrapper);
        wrapper.add(grid);
    }

    private void addFormItem(Div wrapper, FormLayout formLayout,
                             AbstractField field, String fieldName) {
        formLayout.addFormItem(field, fieldName);
        wrapper.add(formLayout);
        field.getElement().getClassList().add("full-width");
    }

    private void updateGrid() {
        grid.setItems();
    }

    private void populateForm(TestRow value) {
        // Value can be null as well, that clears the form
        binder.readBean(value);
    }

    private void newBtnClick() {
    }

    private void saveBtnClick() {

        updateGrid();
    }

    class TestRow {
        String id;
        String title;
        String description;

        public TestRow(String id, String title, String description) {
            this.id = id;
            this.title = title;
            this.description = description;
        }

        public String getId() {
            return id;
        }

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

        public String getTitle() {
            return title;
        }

        public void setTitle(String title) {
            this.title = title;
        }

        public String getDescription() {
            return description;
        }

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

Here is screenshot which shows no combobox.

18103966.png

Actually what I did is:

  1. Opened starter link: https://vaadin.com/start/latest
  2. Checked SpringBoot and then clicked on Customize App link below form
  3. In left pane changed from Pro Dashboard to MasterDetail
  4. Clicked on download App.
  5. Tried to insert ComboBox into right pane where Editor controls placed.

Result - combobox NOT displayed :frowning:

Btw I tried to use code you provided - same result - combobox not shown.

Looks like I found source of problem.

When I opened page with Starter Project configuration - in Right pane it says:

In your IDE, run or debug the main method in Application.java.

    Alternatively, you can run the Maven goal mvn spring-boot:run.

So what I did is always run project from my IDE using just it’s Run button. But when u add new components project must be re-build in order UI components to be compiled!!!

So: NEVER RUN USING IDE (Unless you know what and why you do). Use spring-boot:run !!!

I would suggest mention this on vaadin site Starter Project page.