Multiselect Combobox shows only empty lines

Hi,

I have migrated our Vaadin 10 application to Vaadin 14 (pnpm mode) recently and everything is fine.

Now I want to replace a normal ComboBox with a MultiselectComboBox. With a dataprovider attached, its sizeInBackEnd method is called, and the Box shows the corresponding number of empty (!) lines. The dataprovider’s fetchFromBackEnd method is never called.

If I make it a simple MultiselectComboBox<String> and set some constant items, the dropdown list does not even open. But there are no error messages at all.

I have tried different versions of MultiselectComboBox from 2.4.2 to 3.0.2, it’s all the same.

I assume some problem on the frontend side, so that a callback to fetch the items from the server is missing. But I have no more ideas where to look.

Has anyone an idea what may go wrong here? Any help would be appreciated…

Thanks,
Torsten

I use the MultiselectComboBox in my project and don’t have any problems.

Can you please show us some code?

Sure.

We have build our application on the Vaadin 10 bakery app as a blueprint. There is a form for customer requests that are related to one or more projects. In very most cases it’s only one project, so it was okay in the first version to use a normal ComboBox.

Now I have migrated to Vaadin 14 in pnpm mode and it’s still okay (see first attached screen capture):

...
@Tag("kundenanfrage-form")
@JsModule("./kundenanfrage/kundenanfrage-form.js")
@SpringComponent
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public class KundenanfrageForm extends PolymerTemplate<TemplateModel> implements CrudForm<Kundenanfrage> {
...
@Id("projekte")
private ComboBox<Projekt> projekte;
...	
binder.forField(projekte).withConverter(new ProjektToProjektSetConverter()).bind("projekte");
// Converter just  maps between Set and its first element
projekte.setItemLabelGenerator(Projekt::getName);
projekte.setDataProvider(projektProvider);
...

In kundenanfrage-form.js:

...
import '@vaadin/vaadin-combo-box/src/vaadin-combo-box.js';
...
<vaadin-combo-box label="Projekt(e)" id="projekte" style="width:80%;"></vaadin-combo-box>

Now I change to MultiselectComboBox:

...
@Id("projekte")
private MultiselectComboBox<Projekt> projekte;
...
binder.bind(projekte, "projekte");
projekte.setItemLabelGenerator(Projekt::getName);
projekte.setDataProvider(projektProvider);

and

...
import 'multiselect-combo-box/multiselect-combo-box.js';
...
<multiselect-combo-box label="Projekt(e)" id="projekte" style="width:80%;"></multiselect-combo-box>
...

Nothing else changed. Now I get three empty lines as you can see in the second attachment.

Third example with a simple MultiselectComboBox of String:

...
@Id("projekte")
private MultiselectComboBox<String> projekte;
...
// no binding
projekte.setItems("Test 1", "Test 2", "Test 3");
Set<String> test = new HashSet<>();
test.add("Test 2");
test.add("Test 3");
projekte.setValue(test);
...

with same js.

Now it looks like what you see in the third attachment (pre-set items are shown, but there is no list at all).

I have searched for the reason a couple of hours without success.

Are you using Vaadin 14 as well?
18524694.jpg
18524697.jpg
18524700.jpg

Just to make sure: You are using this https://vaadin.com/directory/component/multiselect-combo-box/samples

Yes, absolutely right. I have tried 2.4.2, 2.5.0 and 3.0.2, all with the same result.

The only difference to what I do is that I’m using the Java class directly and do not import it via JS.

Did you try that as well?

Hi Simon,

indeed it does work this way!

To me that seems to be a sign of a problem within the implementation of the MultiselectComboBox… but anyway.

Thank you very much and have a nice weekend.

Torsten

Torsten Verstappen and Simon Martinelli

good morning, I’m already apologizing to you both, because what I’m going to ask you for, has nothing to do with this topic, but I’m so desperate for help that I’m sending this link to everyone I see active in the vaadin forum.

If you can help me, I will be grateful, remembering as I said earlier, my case, it has nothing to do with this topic created and debated by you. OK?

Thank you very much for your attention, and again, I’m sorry for the inconvenience … I’m new to vaadin / java

https://vaadin.com/forum/thread/18525966/edit-off-grid-button