vaadin-combo-box | Web Component for displaying a list of items | Web Framework library

If you use combobox.setItems(items); then ComboBox will automatically create a ListDataProvider out of those items, which means that you could the following

You can try and add @EnableJpaRepositories annotation to your TaxApplication class

If you want to expand the items on active change (ie. when user clicks on the row), then your _onActiveItemChanged method should use Grid's detailsOpenedItems property like so:

There's no easy answer to that because you have to access a very deep DOM element.

To make it little bit less painful you have to make a function which access provided shadow dom of element like this:

If you want to clone a node and it´s children you have to tell cloneNode so. Please try setting the deep param of cloneNode to true.

The dropdown part is called vaadin-combo-box-overlay, see: https://vaadin.com/components/vaadin-combo-box/html-api/elements/Vaadin.ComboBoxOverlayElement And it is available for styling.

This allows to style the dropdown to some extent, but there is additional shadow root, that prevents to apply e.g. ::-webkit-scrollbar styles on #scroller element.

So the last option would be to make a copy of the vaadin-combo-box html file in right place in frontend directory. It happens so that that file will be used instead of the one coming from webjar. Then you can edit that html file directly. Of course this means that if there are changes in future versions of vaadin-combo-box, you need to copy again, re-apply changes

This works (at least in latest Chrome).

I assume, your project is a Single Page Application, and you use / or a similar routing. This way the browser actually uses a single real document, which is then manipulated to achieve "pages" and navigation.

Due to technical limitations, theme style modules for Vaadin components are not dynamic in the way you expect. Once themes and components are loaded and initialised, their styles become memoized in the classes of their corresponding components.

Suppose you load "page2" first. After loading, memoizes its styles, and more theme modules can be applied. That is why when you navigate to "page1", will continue using the memoized style from "page2".

This means, you have to use same set styles in all the instances of, e. g., , in the document. Therefore, you have to use other means to make them look differently, instead of swapping styles. Here are some options.

Prefix all the custom theme styles with a scoping :host() selector, for example:

I guess you read through https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes already.

If you check https://vaadin.com/components/vaadin-combo-box/html-api/ you will noticed that the part input-field you have defined does not exist for the combobox. The documentation lists:

• text-field: The text field
• clear-button: The clear button
• toggle-button: The toggle button

The used by the combo-box has an input-field part. But if you want to style that one, you will need to add a custom styling for the text-field itself.