vaadin/vaadin-list-box

The Web Component providing reusable list boxes. Part of the Vaadin components.

<vaadin-list-box>

⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the vaadin/web-components monorepository. This repository contains the source code and releases of <vaadin-list-box> for the Vaadin versions 10 to 19.

<vaadin-list-box> is a Web Component providing reusable list boxes, part of the Vaadin components.

Live Demo ↗ | API documentation ↗

  <vaadin-list-box selected="2">
    <b>Select an Item</b>
    <vaadin-item>Item one</vaadin-item>
    <vaadin-item>Item two</vaadin-item>
    <hr>
    <vaadin-item>Item three</vaadin-item>
    <vaadin-item>Item four</vaadin-item>
  </vaadin-list-box>

Installation

The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components are only published on npm, not pushed to GitHub repositories.

Polymer 2 and HTML Imports Compatible Version

Install vaadin-list-box:

bower i vaadin/vaadin-list-box --save

Once installed, import it in your application:

<link rel="import" href="bower_components/vaadin-list-box/vaadin-list-box.html">

Polymer 3 and ES Modules Compatible Version

Install vaadin-list-box:

npm i @vaadin/vaadin-list-box --save

Once installed, import it in your application:

import '@vaadin/vaadin-list-box/vaadin-list-box.js';

Getting started

Vaadin components use the Lumo theme by default.

To use the Material theme, import the correspondent file from the theme/material folder.

Entry points

• The component with the Lumo theme:

  theme/lumo/vaadin-list-box.html

• The component with the Material theme:

  theme/material/vaadin-list-box.html

• Alias for theme/lumo/vaadin-list-box.html:

  vaadin-list-box.html

Running demos and tests in a browser

1. Fork the vaadin-list-box repository and clone it locally.

2. Make sure you have npm and Bower installed.

3. When in the vaadin-list-box directory, run npm install and then bower install to install dependencies.

4. Run npm start, browser will automatically open the component API documentation.

5. You can also open demo or in-browser tests by adding demo or test to the URL, for example:

• http://127.0.0.1:3000/components/vaadin-list-box/demo
• http://127.0.0.1:3000/components/vaadin-list-box/test

Running tests from the command line

1. When in the vaadin-list-box directory, run polymer test

Following the coding style

We are using ESLint for linting JavaScript code. You can check if your code is following our standards by running npm run lint, which will automatically lint all .js files as well as JavaScript snippets inside .html files.

Big Thanks

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.

vaadin-list-box's Issues

2.5.0 is missing _scrollToLastSelectedItem

The fix created for https://github.com/vaadin/vaadin-list-box/issues/74 is not available in the 2.5.0 release. It's private API, so it's technically not breaking, but this prevents the use of the workaround _scrollToLastSelectedItem was created for.

"Tabs that cover the entire width of the tab bar" doesn't cover entire width

Demo: https://cdn.vaadin.com/vaadin-tabs/2.0.0-alpha1/demo/#tabs-basic-demos

Polymer 3 conversion and TS event type definitions

Description

• convert codebase to Polymer 3
• use registerStyles API instead of <dom-module theme-for>
• add events type definitions

Should we introduce dedicated label explicitly specified as attribute?

Several UX/DX tests participants would like to have possibility to explicitly set label in vaadin-list-box like for example we are doing it in vaadin-text-field.

Show a warning of missing vaadin-item

Show a warning of missing vaadin-item import if the component includes vaadin-items
Use the same approach as in vaadin-grid with warning about missing import

vaadin-list-box is not working with paper-menu-button

Hi,

It is not possible to use vaadin-list-box with paper-menu-button, the menu is not closed once an item is selected.

It seems paper-menu-button listens to specific event iron-select to auto close the menu.
vaadin-list-box should fire the same event to be compatible with polymer components.

Uncaught TypeError: Cannot read property 'focus' of undefined

when using the following versions and menu from the markup (which appears to work fine) the menu does not appear as a result of this error.

is it more appropriate to file this under vaadin-list-mixin or vaadin-dropdown-menu?

Uncaught TypeError: Cannot read property 'focus' of undefined
    at HTMLElement.focus (vaadin-list-mixin.js:185)
    at HTMLElement._openedChanged (vaadin-dropdown-menu.js:362)
    at Object.runObserverEffect [as fn] (property-effects.js:214)
    at runEffectsForProperty (property-effects.js:159)
    at runEffects (property-effects.js:125)
    at HTMLElement._propertiesChanged (property-effects.js:1707)
    at HTMLElement._flushProperties (properties-changed.js:335)
    at HTMLElement._flushProperties (property-effects.js:1555)
    at HTMLElement._invalidateProperties (property-effects.js:1527)
    at HTMLElement._setProperty (property-effects.js:1512)

return html`...excerpt...
		<vaadin-dropdown-menu placeholder="modules" on-value-changed="appSelect">
		<template>
		<vaadin-list-box>
			${ repeat(this.itemList, (i, index) => index, (i, index) => html`<vaadin-item value="${i.name}">${i.title}</vaadin-item>`) }
		</vaadin-list-box>
		</template>
		</vaadin-dropdown-menu>




npm ls --depth=0
├── @polymer/[email protected]
├── @polymer/[email protected]
├── @vaadin/[email protected]
├── @vaadin/[email protected]
├── @vaadin/[email protected]
├── @vaadin/[email protected]
├── @vaadin/[email protected]
├── @vaadin/[email protected]
├── @vaadin/[email protected]
├── @webcomponents/[email protected]

Update docs for multi select listbox

Selected property should emphasize that it’s for single selection only and vice versa. Also the event documentation should say it's not fired on single-select mode

Adopt DataView API for ListBox & MultiSelectListBox

Similarly as it has been done to other in-memory select components (Select, RBG, CBG).

It should be addressing this one too https://github.com/vaadin/vaadin-list-box-flow/issues/74

Generate TypeScript definitions for P3

Child of vaadin/vaadin-core#186

Offer an api for getting the selected item

e.g. vaadin-drop-down needs to access private API in order to get the selected item.

Additionally it would be nice to select an item by providing the item without having to know it's index in the dom.

Proposed API

   menu.selectedElement;
   menu.setSelected(itemElement);

Fix vaadin-list-box theme

The vaadin-items aren't getting the correct height

Screen reader support is lacking

The component (including the items in the dropdown) is announced as a generic “group”.
The changes to the selection are not announced.

vaadin-list-box is not focused when vaadin-context-menu overlay, containing a vaadin-list-box, is opened for the first time

An error is logged to the console when opening a context menu overlay, which contains a vaadin-list-box, for the first time

Subsequent opens work without errors.

MultiselectListBox looses its value after remove() and add()

Version:
Seen on vaadin 14.4.6 - high likelyhood this also is present in more recent versions (code not changed AFAIK)

Description:
The MultiselectListBox does not preserve its set value when the component is added to a container that already exists, removed and then added again. This most certainly is due to a rebuild() in an attach listener added to the ListBoxBase class that does also clear().

Steps To Reproduce:

final List<String> listBoxItems = Arrays.asList("1", "2", "3", "4");
final MultiSelectListBox<String> listBox = new MultiSelectListBox<>();
listBox.setItems(listBoxItems);
listBox.setValue(Collections.singleton("2"));
final Button addButton = new Button("add");
add(addButton);
addButton.addClickListener(event -> {
    add(listBox);
    remove(listBox);
    add(listBox);
});

Expected Result:
The MultiselectListBox keeps its value no matter how many times and where it is added/removed.

Ensure Polymer 3 Modulizer compatibility

See “Generic steps” at vaadin/components-team-tasks#326

UX/DX tests and fixes

Plan, book, conduct and report.

Incorrect initial rendering in Edge

The items are rendered without the left padding. After you hover over the items the padding is applied.

Test case: http://output.jsbin.com/xekoyos (the right side list is a vaadin-list-box, on the left is a vaadin-grid)

Should we introduce value property?

One of the UX/DX tests participant propose to introduce value property to vaadin-list-box to align with vaadin-dropdown-menu where it is currently used.

Improve demos

MultiSelectListBox doesn't respect DataProvider::getId

Calling setValue with a set of items, all of which equal some item in the current item set, but are not the same object reference, throws an exception.

This is the current implementation of converting from the model object (Java Set) to the web component property (array of indices of selected items):

private static <T> JsonArray modelToPresentation(
        MultiSelectListBox<T> listBox, Set<T> model) {
    JsonArray array = Json.createArray();
    model.stream().map(listBox.getItems()::indexOf)
            .forEach(index -> array.set(array.length(), index));
    return array;
}

Instead of finding the index of the exact reference in the current set of items, it should find a match with:

dataProvider.getId(item1).equals(dataProvider.getId(item2));

Multiple selection feature

Several UX/DX tests participants would like to see multiple selection functionality in vaadin-list-box, so it will be possible to select multiple options by just adding multiple attribute to vaadin-list-box. (Selection process similar to native select-option multiple selection)

Disabled and Readonly seem not to work

When tried to use disable or readonly attributes like disabled="" has-label="" aria-disabled="true" or disabled for the vaadin-list-box , they did not work.

An example needed on using items property

Website feedback: "In the vaadin-list-box HTML please include an example using items property"

Please close this issue after this request is processed: vaadin/vaadin.com#31

Multiselectlistbox setvalue not working

Hi,

refering to https://vaadin.com/forum/thread/18577936/multiselectlistbox-setvalue-error

it used to worked in vaadin 14.3.7. But from 14.4.0 onwards it does not work.

Sample project are in the forum.

Would really appreciate some help.

Item padding is wrong when using RTL

The left and right padding values should be swapped when using RTL: https://github.com/vaadin/vaadin-list-box/blob/master/theme/lumo/vaadin-list-box-styles.html#L33-L34