Select JS client side item creation


Have a set of selects that have a dependency relationship between them (first select affects the second select values, second the third and so on). Due to legacy business logic code, there is the need to add the values of the second and following selects through JS. Also, on page load, only the first select has the values set, while the rest of the selects are empty.

Added a ValueChangeListener to the first select, that executes JS code to load the second select data.
Tried to this to the second select, though the listener code was not executed, despite the event being triggered (request performed). Seems like vaadin is performing some sort of data validation to disallow items that were not loaded or known by it.

Is there any configuration or workaround that can be performed in order to get vaadin to accept the items added client-side?



I don’t know exactly what your use case is, but adding selection items from the client-side with JS sounds really awkward and against the programming model of Vaadin. It might also have security issues. Where do the selection choises come if not from the server?

You should be able to extend the client-side widget of Select or ComboBox to integrate with external JS code. Just bypass the receiving of the content from the server-side and intead get it from your JS API. You will need to solve some sub-tasks, such as handling selection changes and getting a reference to the other selects.

There’s already a mechanism for adding new items from the client-side by the user, when setNewItemsAllowed is true, in which case they are also sent to the server, although that may not be necessary in your case.