Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
TwinColSelect - undo user input
I have a TwinColSelect where some of the selected values might not be unselected. This is due to our internal structure where some values are inherited and thus the user can not remove it.
How can this be made with the TwinColSelect?
I see that the js moves the selected value before sending a response to the server. When receiving the valueChange event, how can I detect what value was removed, and what happens if I undo what the user did? Will a new valueChange event be fired?
I think this could work. Bind the twincolselect to a Property and put the Field to writeThroughMode(false), which means it's in buffered mode. Then you can in Property.ValueChangeEvent compare the Field value to the Property value and either commit() or discard() depending on your validation logic.
I guess you already tried it, but it should be ok to just override the change the user made in a server side listener. Make the component immediate for that. The row will flash off and on in the browser, though.
You could also replace TwinColSelect with e.g. ListBuilder add-on, which does most things on the server side, and maybe handle selection changes with click events rather than selection events to have them validated by the server.
Finally, you could also customize the client side of TwinColSelect (possibly not that easy) to avoid the small annoyance.