0

In my Vaadin (v.23.2.6) application I am creating a bean of class Book. This bean has set of tags. Tags are retrieved from the database and contain two properties - tagName and tagDescription. In my UI form I specified MultiSelectComboBox for Tags.

this.tagsField = new MultiSelectComboBox<>("Tags");
this.tagsField.setAllowCustomValue(true);
this.tagsField.setAutoOpen(false);
this.tagsField.setItemLabelGenerator(Tag::getTagName);

It is working, but I do want to display value of tagDescription when cursor is hovering over the tagName in the selection list. What kind of event listener I can use for that purpose? Shall I use Notification or there is something else that can help me with this implementation? Please advise.

Gary Greenberg
  • 1,084
  • 8
  • 14

1 Answers1

1

While it's technically possible, you don't want to listen to hover (mouseover) events on the server. That's overkill and will lead to a lot of unnecessary network traffic. Instead, you can take care of it in the client with a Renderer. For example, using the standard HTML title attribute:

tagsField.setRenderer(LitRenderer.<Tag>of(
    "<span title='${item.description}'>${item.name}</span>")
        .withProperty("description", Tag::getTagDescription)
        .withProperty("name", Tag::getTagName)
);
ollitietavainen
  • 3,900
  • 13
  • 30
  • I did add the code you recommended: this.tagsField.setRenderer(LitRenderer.of("${item.name}") .withProperty("description", Tag::getTagDescription).withProperty("name", Tag::getTagName)); Now it is throwing NPE: Caused by: java.lang.NullPointerException: null at com.vaadin.flow.data.renderer.LitRenderer.(LitRenderer.java:80) ~[vaadin-renderer-flow-23.2.6.jar:na] at com.vaadin.flow.data.renderer.LitRenderer.of(LitRenderer.java:128) ~[vaadin-renderer-flow-23.2.6.jar:na] – Gary Greenberg Nov 25 '22 at 18:18
  • My bad. I did look inside the LitRenderer source code and figured out why it was throwing NPE. I placed the code in the constructor, where I was setting properties of all fields. No wonder that UI.getCurrent() there returns null. BTW, I do think it is a bug and line litRendererCount = UI.getCurrent().getElement() .getProperty("__litRendererCount", 0); shall be rep[laced with litRendererCount = (UI.getCurrent() == null)? 0 : UI.getCurrent().getElement() .getProperty("__litRendererCount", 0); Meanwhile, I override method open() and moved code there. It is working now. – Gary Greenberg Nov 25 '22 at 21:46
  • Can this solution used for something other than combo-box? I used it for assigning tags to books. Now I do need to display book info, including tags. I want to show them like here at SO (see above at the question). – Gary Greenberg Nov 29 '22 at 02:32
  • You could use a VirtualList, which supports Renderers: https://vaadin.com/docs/latest/components/virtual-list – ollitietavainen Nov 29 '22 at 09:16
  • I do not think VirtualList is applicable here. I am thinking of something like horizontal line of labels, displaying tagName and showing tagDescription when mouse hovering over it. There will be 2-3 tags (no more than 5 for sure). BTW, will the bug in LitRenderer fixed in the nearest future? – Gary Greenberg Nov 30 '22 at 02:37