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.