polymerelements / paper-listbox Goto Github PK

Home Page: https://www.webcomponents.org/element/PolymerElements/paper-listbox

HTML 52.12% JavaScript 47.88%

paper-listbox's Introduction

<paper-listbox>

<paper-listbox> implements an accessible listbox control with Material Design styling. The focused item is highlighted, and the selected item has bolded text.

<paper-listbox>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

An initial selection can be specified with the selected attribute.

<paper-listbox selected="0">
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

Make a multi-select listbox with the multi attribute. Items in a multi-select listbox can be deselected, and multiple item can be selected.

<paper-listbox multi>
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

Styling

The following custom properties and mixins are available for styling:

Custom property	Description	Default
`--paper-listbox-background-color`	Menu background color	`--primary-background-color`
`--paper-listbox-color`	Menu foreground color	`--primary-text-color`
`--paper-listbox`	Mixin applied to the listbox	`{}`

Accessibility

<paper-listbox> has role="listbox" by default. A multi-select listbox will also have aria-multiselectable set. It implements key bindings to navigate through the listbox with the up and down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter of a listbox item will also focus it.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-listbox

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-listbox/paper-listbox.js';
    </script>
  </head>
  <body>
    <paper-listbox>
      <div role="option">item 1</div>
      <div role="option">item 2</div>
      <div role="option">item 3</div>
    </paper-listbox>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-listbox/paper-listbox.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-listbox>
        <div role="option">item 1</div>
        <div role="option">item 2</div>
        <div role="option">item 3</div>
      </paper-listbox>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-listbox
cd paper-listbox
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

paper-listbox's People

Contributors

Stargazers

Watchers

Forkers

bobslaede marcus7777 willytwelty dumbbillyhardy stramel yingminchen5931 jab nenadjovicic mgibas jarrodek lordoftheflies silvrwolfboy exnadella

paper-listbox's Issues

When using shady DOM and programmatically inserting children the element will not render itself properly

Description

The paper-listbox will not render children (at least paper-item) properly when inserted programmatically and when shady DOM is used.

Expected outcome

To see items (in this case paper-items) in the listbox.

Actual outcome

2 cases, both when shady DOM (It will work properly with shadow DOM):

When trying to us it with paper-dropdown-menu, paper-items are rendered outside the listbox, when clicked on any paper-item they disappear and dropdown isn't working (will not render dropdown list).
When just creating paper-listbox with paper-items, items initially are inserted as a child of the listbox but after clicking on any item they are removed from the DOM.

Live Demo

https://jsbin.com/cuwomew/edit?html,js,output

Steps to reproduce

See demo, it's self explanatory.

Browsers Affected

I only have Chrome so at least it.

paper-listbox doesn't update selected* properties after rebinding to new Array when the index stay the same

Description

The 'paper-listbox' (so as iron-selector) doesn't update selected* properties (and doesn't fire 'on-iron-selected' event) after rebinding to new array when selected element has the same index in array as early.

Live Demo

codepen.io

Element not installable on Glitch

Description

I was trying to use glitch to showcase a bug in paper-dropdown-menu but I'm not able to as paper-listbox installs corrupted in glitch. After running bower install paper-listbox on glitch bower_components/paper-listbox seems corrupted, see

Doing bower install paper-listbox --force does not help

Expected outcome

paper-listbox should be installed, bower_components/paper-listbox/paper-listbox.html should return 200

Actual outcome

paper-listbox is theoretically installed, bower_components/paper-listbox/paper-listbox.html returns 404

Live Demo

https://glitch.com/edit/#!/ossified-scarer?path=bower.json:6:29

Steps to reproduce

Open glitch
Install paper-listbox either from console, or via bower.json
Put <link rel="import" href="bower_components/paper-listbox/paper-listbox.html"> in index.html
open preview

Browsers Affected

n/a

Get selected item in paper-listbox

I tried to get selected item value but i cannot!

Here is the code:

<div class="suggestions">
    <paper-listbox selected="{{selectedLocation}}" attr-for-selected="location">
        <template is="dom-repeat" items="{{suggestions}}">
            <paper-icon-item location="{{item.location}}">
                <iron-icon icon="maps:place" item-icon></iron-icon>
                <div class="location">
                    <h4>{{item.description}}</h4>
                    <p>{{item.subdescription}}</p>
                </div>
            </paper-icon-item>
        </template>
    </paper-listbox>
</div>

In script tag:

Polymer({
    is: "google-map-search-bar",
    properties: {
        ...

        selectedLocation: {
            type: String,
            observer: 'test'
        }
    },
    test: function(newValue, oldValue) {
        console.log(newValue); // Give out undefined
    }
});

I tried many ways to get the selected item value but i cannot.

Can you help me if you have another way?

scroll with 'handle' is erratic

If you specify a height and overflow-y: scroll, then the scroll is erratic when using the scrollbar handle.

Expected outcome

Smooth/deterministic scroll.

Actual outcome

Erratic scrolling.

Live Demo

https://embed.plnkr.co/2R2TRC/

Steps to reproduce

Open the page in a web browser.
Attempt to scroll using the scrollbar. Notably, clicking in a blank region of the scrollbar always moved back to the top (or is it the currently selected item?); similarly for clicking on the down arrow on the bottom of the scroll bar.
Notice easy workaround of using a surrounding div (commented out in the demo).

Browsers Affected

paper-listbox does'nt have required property

paper-listbox currently does'nt have required property

Listbox mandatory selection cases may arise

Modifying paper-listbox scrollbar

Is it possible to modify the vertical scrollbar in a paper-listbox?

I currently see no mixin for this, and I have tried

#dropdown::-webkit-scrollbar-track {
    @apply --scrollbar-style;
}

#dropdown .dropdown-content::-webkit-scrollbar-track {
    @apply --scrollbar-style;
}

.dropdown-content::-webkit-scrollbar-track {
    @apply --scrollbar-style;
}

where --scrollbar-style is a custom style. Nothing seems to work.

paper-listbox steals focus from paper-input

Description

From the paper-listbox docs:

https://www.webcomponents.org/element/polymerelements/paper-listbox

Typing the first letter of a listbox item will also focus it.

Under some circumstances, it can steal the focus from a paper-input, which is extraordinarily confusing for the developer.

Expected outcome

I expect to be able to click in a paper-input and type anything.

Actual outcome

Typing the first letter of one of the listbox items steals the focus.

Live Demo

https://plnkr.co/edit/wqwAAj?p=preview

Steps to reproduce

load example demo
click 'OPEN DIALOG'
click in input field
type 's' (the first letter of 'SOME TEXT' which is the item in the paper-listbox)

notice the focus changes to the 'SOME TEXT'

click on 'workaround' to set the paper-listbox's attr-for-item-title property to '-'.
open the dialog again
now you can type 's' without any problem.

Browsers Affected

[2.0-preview] up/down keyboard events don't update selected paper-item

Focus the first item by clicking on it, then press down arrow key.
In ShadyDom, selection doesn't get updated. Not sure if this is the right repo where to file this issue (not sure if it is a iron-menu-behavior, paper-item, paper-item-behavior, paper-listbox issue 😛 )

<paper-listbox>
  <paper-item>allosaurus</paper-item>
  <paper-item>brontosaurus</paper-item>
  <paper-item>carcharodontosaurus</paper-item>
  <paper-item>diplodocus</paper-item>
</paper-listbox>

@bicknellr FYI

on-iron-activate fired before selected property changed

Description

The on-iron-activate event is fired before the selected property changes. This means that it is impossible to find out the currently selected index in the listbox in the hadler for on-iron-activate.

While other events, like on-iron-selectfire after the selected property has changed, on-iron-activate is the only event that can be used to detect taps on items that are currently selected.

Expected outcome

In the handler for on-iron-activate, the selected property is properly set.

Actual outcome

In the handler for on-iron-activate, the previous selected property is set (or undefined if tapped for the first time).

Live Demo

https://glitch.com/edit/#!/ubiquitous-taker?path=public/my-element.html:25:0

Browsers Affected

It should affect all browsers, since it's an implementation issue. Only tested on Chrome.

multi and selectedItems binding

Description

selectedItems binding does not seem to be working

Expected outcome

value bound selectedItems should contain selected value(s)

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Animation error

Description

When adding the following code:

        <paper-menu-button id="actionMenu" vertical-align="bottom" #actionMenu>
            <paper-icon-button src="assets/imgs/plus-icon.png" slot="dropdown-trigger" class="dropdown-trigger attachment-button menu-trigger"></paper-icon-button>
            <paper-listbox slot="dropdown-content" class="dropdown-content menu-content" ignoreSelect="false">
                <paper-item class="menu-item mi-new-task komed-menu-item" (click)="addNewTask()">
                    {{'task.addTask' | translate}}
                </paper-item>
                <paper-item class="menu-item mi-new-file komed-menu-item" (click)="addNewFile()">
                    {{'chat.newFile' | translate}}
                </paper-item>
            </paper-listbox>
        </paper-menu-button>

And click on the button I get this warning in the console:

Couldnt play ( fade-in-animation ). ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-in-animation.html:39)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.html:33)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.html:93)
    at HTMLElement._renderOpened (iron-dropdown.html:233)
    at HTMLElement.__openedChanged (iron-overlay-behavior.html:541)

And the whole page freezes.

Expected outcome

No error

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

[ X] Chrome
[ X] Firefox
[ X] Safari 9
[ X] Safari 8
[ X] Safari 7
[ X] Edge
IE 11
IE 10

Unselectable and hidden items on Edge

Description

After creating this issue for paper-dropdown-menu I realized at least some of this buggy behavior is actually because of paper-listbox. These are all reproducible on the paper-listbox demo page running Edge 40.15063.0.0. The screenshots below are from that demo.

Expected outcome

Clicking an item should not result in it disappearing.
Any item in the list should be selectable.

Actual outcome

On any demo on the demo page, click any item. Notice that that item disappears from the list and instead shows up on the very left of the popup window (the same spot for all of them). The screenshot below is from the second demo, notice the top left corner (I clicked on "Inbox").

After selecting an item from the first or second demos, notice it's impossible to select any other item "above" the one currently selected. The multi menus don't seem to have this issue.

Live Demo

https://www.webcomponents.org/element/PolymerElements/paper-listbox/demo/demo/index.html

Browsers Affected

Improve attribute consistency

There's an attribute called items which contains an array of objects that we're going to render. In effect, items is the model for the listbox. However, when you use the selectedItems attribute, you don't get a subset of the items back, you get DOM nodes for the selected paper-item objects. There doesn't seem to be a way to get that subset of selected objects back. selectedValues never seems to be updated -- at least if you bind an array property to it, and watch it for changes, it never changes.

It would be clearer (and cleaner) if selectedItems returned an array of model objects back. If for some reason, you wanted the text of the paper-item, you could use the selectedValues and attrForSelectedValue to get an array of text values back.


var model = [
  {"name":"Kirk", "org":"command"},
  {"name":"Bones", "org":"medical"},
  {"name":"Spock","org":"science"},
  {"name":"Scotty","org":"engineering"}
];
var selected = [];
...
<paper-listbox items="{{model}}" attr-for-selected-values="name" selectedItems="{{selected}}">
   <paper-item>[[item.name]]</paper-item>
</paper-listbox>
...

In this example, I've simplified things a bit. The paper-listbox (in the example) actually iterates over the items and generates them rather than having a separate template iterator around paper-item. If Kirk and Spock were selected using the GUI, then looking at the selected variable would show:

[{"name":"Kirk", "org":"command"},{"name":"Spock","org":"science"}]

Looking at selectedValues would give you:

["Kirk","Spock"]

If attrForSelectedValues were not set, then selectedValues would have the same values as selectedItems.

Use case vs paper-menu

Could you explain or link to some relevant information about when to use this over paper-menu?

The W3 Roles don't present a terrific differentiation. As I interpreted, a menu shouldn't have multi-select and activating items in a menu should cause an instant action?

W3 Roles - #List
W3 Roles - #Menu

Dropdown opens but then immediately closes

Description

Polymer 3
paper-dropdown-menu or paper-listbox dropdown closes before a selection is made

Expected outcome

dropdown stays open until a item is clicked on

Actual outcome

the dropdown opens but then closes immediately not giving the user time to select

Live Demo

Please see gif

Browsers Affected

Both paper-dropdown-menu and paper-listbox are 3.0.1
Chrome 76.0.3809.132 (Official Build) (64-bit)

                <paper-dropdown-menu
                  no-animations
                  id="bedrooms"
                  label="Bedrooms"
                  name="bedrooms">
                  <paper-listbox
                    slot="dropdown-content"
                    class="dropdown-content bedrooms"
                    selected="0">
                    <paper-item>1 bedroom</paper-item>
                    <paper-item>2 bedrooms</paper-item>
                    <paper-item>3 bedrooms</paper-item>
                    <paper-item>4 bedrooms</paper-item>
                    <paper-item>5 bedrooms</paper-item>
                    <paper-item>6 bedrooms</paper-item>
                    <paper-item>7 bedrooms</paper-item>
                    <paper-item>8 bedrooms</paper-item>
                    <paper-item>9 bedrooms</paper-item>
                    <paper-item>10 bedrooms</paper-item>
                  </paper-listbox>
                </paper-dropdown-menu>

A11y focus test fails

Description

a11y focus test fails in suite. (is fine outside of suite)

Expected outcome

element should be visible if focusable

Actual outcome

I think due to it being loaded by a suite, the element is not visible

Live Demo

see travisci

Steps to reproduce

run tests

Browsers Affected

Add sub menu

Description

Add a sub menu element like in https://github.com/PolymerElements/paper-menu/blob/master/paper-submenu.html

Expected outcome

I would like to use it as paper-submenu.

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

iron-deselect not firing if selectedItems has default array

Exemple

    <paper-listbox
    slot="dropdown-content"
    id="liste_fixe"
    multi
    selected-values="{{valisteMulti}}"
    on-iron-select="_setvaleurfixe"
    on-iron-deselect="_deselectvaleurfixe"
    attr-for-selected="data-value">

valisteMulti is filed with eligible values on the attached function.

When clicking on a pre-selected value, the on-iron-deselect is not fired.

If valisteMulti has no default value, the on-iron-deselect is correctly fired.

Multi-pre-select from template is either impossible or not documented

Description

Multi-pre-select from template is either impossible or not documented.
In order to do multiple preselect "reinventing bycicle" through writing custom item populating code is required.

Expected outcome

Should be able to do something like

<paper-listbox multi>
  <paper-item selected>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
  <paper-item selected>Item 3</paper-item>
</paper-listbox>

Actual outcome

The only documented way which doesn't support multiple select (or if it does, that part is not documented at all)

<paper-listbox selected="0">
  <paper-item>Item 1</paper-item>
  <paper-item>Item 2</paper-item>
</paper-listbox>

Live Demo

https://elements.polymer-project.org/elements/paper-listbox?view=demo:demo/index.html&active=paper-listbox

Steps to reproduce

https://elements.polymer-project.org/elements/paper-listbox?view=demo:demo/index.html&active=paper-listbox

Tests are broken

The test 'selected item has an appropriate className' is async but doesn't request / call the 'done' function.

left/right arrow keys

Description

The paper-listbox element supports traversing its paper-item elements using up/down arrow keys but not left/right arrow keys.

Expected outcome

Pressing left/right arrow keys while a paper-listbox element has focus traverses its paper-item elements the same as up/down arrow keys (left goes to the previous paper-item element while right goes to the next paper-item element).

Actual outcome

No paper-item element traversal is performed (i.e. focus remains on the paper-item element that currently has focus).

Live Demo

https://jsbin.com/zesihajuba/1/edit?html,output

Steps to reproduce

Put a paper-listbox element in the page.
Add multiple paper-item elements in it.
Style the paper-item elements to display inline.
Open the page in a web browser.
Click the first paper-item element. It receives focus.
Press the up/down arrow keys. Focus moves between the paper-item elements.
Press the left/right arrow keys. Focus does not move between the paper-item elements.

Browsers Affected

P.S.

I am exploring using the paper-listbox element in a form for have a horizontally stacked listbox for short selections (e.g. ["Yes", "No"], ["Male", "Female"], ["SR22", "FR44", "None"], ["Accept", "Decline"], etc.). Is this an appropriate web component to use for doing such or might you recommend a different one? Thank you.

Docs should distinguish when to use paper-listbox vs paper-menu

What are the differences between these two elements and when should we use one and not the other?

See this cross-post.

paper-listbox not included in Paper Elements Bower update.

Should the paper-listbox not be included in the Bower update? I'm assuming it will have it's own folder.

<template> adding items to paper-list

Iron list could use for having dynamic items created.
<iron-list items="[[data]]" as="item"> <template> <div> Name: [[item.name]] </div> </template> </iron-list>
How to do same with paper-list?

no way to focus the selected item

If you use the selected property to indicate which item is selected, it only bolds the text of the selected item. If you then click on the selected item, it then changes the appearance, which is counter-intuitive.

I am using a paper-listbox with paper-items, and I want to set which one is selected when the app starts and its appearance should be as if the user has selected it - ie it should also be focused.

There is a 'focusedItem', but no 'focusItem' property.

Is there some way to do what I want?

Should the demo work out of the box, when repository cloned?

Hi there,

Should the demo work out of the box, when repository cloned?

Right now it is necessary to change some paths in the demo/index.html so that the demo can be seen when cloned.

Broken layout and style in Edge 40 (EdgeHTML 15)

Description

In the latest Edge 40.15063.0.0 from Windows 10 Creators Update, the layout and style of the paper-listbox is broken, also when used e.g. inside paper-dropdown-menu.

Expected outcome

Actual outcome

Live Demo

https://www.webcomponents.org/element/PolymerElements/paper-listbox/demo/demo/index.html
https://www.webcomponents.org/element/PolymerElements/paper-dropdown-menu/demo/demo/index.html

Steps to reproduce

Download and install Windows 10 Creators Update from https://www.microsoft.com/en-us/software-download/windows10
Run any of the above live demos in Edge 40

Browsers Affected

Callback for Key Press Event Fails

Description

I'm using a paper-listbox in an Angular2Dart component. I set up a callback in the ngOnInit method.
listbox = querySelector('.scroll-list'); listbox.addOwnKeyBinding('pageup', 'onPageUp');
When the pageup button is press when the listbox has focus, an error is thrown:

Uncaught TypeError: Cannot read property 'call' of undefined Polymer.IronA11yKeysBehavior._triggerKeyHandler @ (index):14940 Polymer.IronA11yKeysBehavior._onKeyBindingEvent @ (index):14924

The code at 14940 is:

this[handlerName].call(this, event);

handlerName = "onPageUp"
this = paper-listbox.scroll-list

More detail and code can found here: http://stackoverflow.com/questions/38773268/polymer-call-back-giving-the-error-uncaught-typeerror-cannot-read-property-ca

My pubspec file specifies:
polymer: ^1.0.0-rc.17
polymer_elements: ^1.0.0-rc.8

Expected outcome

The callback method being invoked

Actual outcome

The error given above.

Live Demo

Steps to reproduce

The basis for my code is the https://dart.academy/dart-angular-2-and-polymer-together/
I imagine you could add a listbox to it and reproduce it.

Browsers Affected

not working properly inside angular 2

Description

paper-dropdown-menu, paper-listbox is not rendering properly inside angular2

Expected outcome

after clicking the paper-dropdown-menu element, a dropdown should popup and clicking an option should show selected value

Actual outcome

without clicking anything, it shows the options, and clicking the option hides it.

Live Demo

https://embed.plnkr.co/pKksem60YSlzMlJzi9CD/
example shows rc.3, but its also reproducable in rc4

Steps to reproduce

just include the paper-dropdown-menu, paper-listbox inside angular2 component.

Browsers Affected

[edge] rendering issue when `window.Polymer.lazyRegister` and `...useNativeCSSProperties` are `true`

Description

If you add:

  <script>
      window.Polymer = {
        lazyRegister: true,
        useNativeCSSProperties: true,
      };
  </script>

to the top of demo/index.html (under the <title> is where I put it), then clicking on items in the list causes them to be moved to the top of the page...or something...not correct behaviour anyway.

Disabling either of the options seems to fix the problem, which is a little perplexing - I'd expect one of them to cause a problem, but not the combination.

Browsers Affected

Microsoft Edge 40.15063.0.0