Vaadin 23.3.0 - Multiselect Combobox Readonly Renderer

So I’ve been using the built-in multi-select combo box, and I’ve been trying to set up a custom renderer. Without a custom renderer, when the Combobox is read-only, the field cannot be changed but the drop-down options are still visible (see here:
However, with a custom renderer, the read-only combobox will simply show empty spaces. I’ve tried using both Component and Lit renderers, changing the order I populate the combo box/apply the renderer/set it read-only, and I’ve been combing through the source code but I can’t find anything. This has been driving me nuts for hours and I can’t seem to find any solution, is there a way around this?

I think it’s a feature :grimacing: or bug… depending who you ask… a similar problem is present even without the renderer - there multiple blank lines are rendered

Yes I’ve seen that bug! I got around it by setting the items in the combobox to be the same as the selected items when i set it as read-only, and then they display how you’d expect them to, sans blank lines. With this setup, if its read-only and without the renderer it displays fine, and if its NOT readonly with the renderer it’s also fine - but trying to use both results in blank lines :(

From inspecting with the browser, I think that since my combobox is set as readonly, the renderer is automatically adding some html style/flag that causes them to be hidden, but I have no idea if this can be overridden.

just wondering (no real solution): why not using setDisabled instead? Which would also remove the possibility to open the drop-down… no drop-down no problem tho

I would prefer than honestly but I’m pretty sure setting it as disabled doesnt allow it to have a value set/readable - my usecase is an editing dialog, so I want everyone to be able to see the current value, with only certain people able to change it (hence the readonly)

Disabled should still show the values set :slightly_smiling_face:


Oh really? That’d be great! :) I vaguely remember I had issues with binders/empty value/readability before with another component, and I didn’t see any examples in the multiselect cb documentation, so I assumed it was a no-go, as soon as I’m back at my laptop I’ll try it out!

So I’ve looked at it again, and if my renderer doesn’t reference the object that the Combobox contain (eg Person), it works fine… Here if I hardcode in a String it works fine, but if I add a Person::getName property it breaks…

Okay, even weirder: It is ONLY making the property invisible. If this is my renderer:

`private Renderer createGreyedOutPersonRenderer(boolean disabled) {
String template;
if (disabled) {
template = “<div style="color: gray;">TestingTesting${}”;
} else {
template = “

return LitRenderer.of(template)
.withProperty(“name”, PersonEntity::getGroupName);


The readonly version will show “TestingTesting”, and the not readonly version will show “TestingTestingGroupname”

Oh that is a security Feature because disabled components should not be allowed to read/write data from the server :sweat_smile:

Oh dear… Well I finally got to the bottom of it at least :sweat_smile: :sob:

If I pass it through another function or a Service is there a way to go around it?

I had no idea, I assumed since it worked in binders etc it would be okay :smiling_face_with_tear:

I don’t think you can get a dynamic renderer to work with a disabled combobox by design

Do you mean read-only? At the moment the read-only version was the one I was talking about :) And yeah, I’m guessing the individual dropdown menu items are set as disabled (so you can’t select them) by Vaadin so I’d say there’s no work around