vaadin/vaadin-list-box

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

vaadin-list-box's Issues

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

Improve demos

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.

Generate TypeScript definitions for P3

Child of vaadin/vaadin-core#186

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.

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.

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)

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)

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

UX/DX tests and fixes

Plan, book, conduct and report.

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.

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.

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 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.

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

Ensure Polymer 3 Modulizer compatibility

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

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

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

Fix vaadin-list-box theme

The vaadin-items aren't getting the correct height

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);

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));

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.

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.

"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

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.