Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Dependent NativeSelect?
I am building a form with two-dropdown (NativeSelect) , with second NativeSelect dependent on the first NativeSelect . Just like when selecting a State , and 'ZIP' shows its containing zip codes.
I searched but cannot find such example . This is my screen , it doesn't work. The second NativeSelect seems changing when user select the first NativeSelect, but I cannot dropdown the second NativeSelect.
This is initial state.
When user select 'company1' from the 'Company' dropdown
The 'entry' select is changed
But I cannot dropdown it.
Here is my code :
public SampleForm(Supplier<List<Company>> companySupplier , EntryDao entryDao) {
this.companySupplier = companySupplier;
this.entryDao = entryDao;
setCompanySupplier(companySupplier);
}
public void setCompanySupplier(Supplier<List<Company>> companySupplier ) {
this.companySupplier = companySupplier;
companySupplier.get().forEach(company -> {
companySelect.addItem(company);
companySelect.setItemCaption(company, "[" + company.getId() + "] " + company.getName());
});
companySelect.setNullSelectionAllowed(false);
companySelect.setMultiSelect(false);
companySelect.addValueChangeListener(event -> {
Company company = (Company) event.getProperty().getValue();
logger.info("loading entries from company : {} " , company);
setEntryList(entryDao.findByCompany(company));
});
}
public void setEntryList(List<Entry> entryList) {
entrySelect.removeAllItems();
logger.info("entryList size = {}" , entryList.size());
entryList.forEach(entry -> {
entrySelect.addItem(entry);
entrySelect.setItemCaption(entry , entry.toString());
});
entrySelect.setImmediate(true);
entrySelect.setNullSelectionAllowed(false);
entrySelect.setMultiSelect(false);
entrySelect.setEnabled(true);
}
@Override
protected Component createContent() {
return new MVerticalLayout(
new MFormLayout(companySelect , entrySelect , enabled)
.withMargin(false) , getToolbar()
).withMargin(new MMarginInfo(false , true));
}
My algorithm is simple : when user clicks the companySelect , the addValueChangeListener will load dependent entries (belonging to the company) , and set to the entrySelect .
But I don't know why it doesn't work.
Did I miss anything ? Thank you.