polymerelements / paper-dropdown-menu Goto Github PK

When putting a paper-input and a paper-dropdown-menu together in a vertical layout, the labels do not align. I think this is a common setup for these elements and I would expect the labels to align vertically, e.g.

<div class="layout vertical">
  <paper-input label="Input!"></paper-input>
  <paper-dropdown-menu label="Dropdown!">
    <paper-menu>
      <paper-item>A</paper-item>
      <paper-item>B</paper-item>
      <paper-item>C</paper-item>
    </paper-menu>
  </paper-dropdown-menu>
</div>

This caused by the paper-menu-button padding, but I think this should not be present in the paper-dropdown-menu.

If a paper-dropdown-menu element is inside a paper-dialog element and dropdown-menu gets opened, it creates an overlay over everything. That is in mobile safari. In chrome and normal safari, it works fine.

Having the selected childs value as the dropdown value like a <select> tag makes more sense, as the label is just for describing the selected value. For example the following dropdown should return the selected items value but instead returns the label.

<paper-dropdown-menu label="Subject" value="{{subject}}">
    <paper-menu class="dropdown-content">
        <paper-item value="article">A new Article</paper-item>
        <paper-item value="case">Make a case</paper-item>
        <paper-item value="question">General question</paper-item>
    </paper-menu>
</paper-dropdown-menu>

Using label and value attributes on a <paper-item> has no affect to paper-dropdown-menu.

When trying to set font-size of the paper-dropdown-menu component, the mixin fails:

--paper-dropdown-menu-input: { font-size: 13px; }

If I have a large list of items, and I scroll down far enough (to an item not currently displayed), and then tap/click a new item to select it, it looks like the scroll is reset to the currently selected item.

I.e., something like:

    <paper-dropdown-menu id="menu" label="Choose a Style" selected="[[selected]]">
      <paper-menu class="dropdown-content">
        <template is="dom-repeat" items="[[items]]">
          <paper-item>[[item]]</paper-item>
        </template>
      </paper-menu>
    </paper-dropdown-menu>

ready: function() {
        this.items = ['agate', 'androidstudio', 'arta', 'ascetic', 'atelier-cave.dark', 'atelier-cave.light', 'atelier-dune.dark', 'atelier-dune.light', 'atelier-estuary.dark', 'atelier-estuary.light', 'atelier-forest.dark',
          'atelier-forest.light',
          'atelier-heath.dark', 'atelier-heath.light', 'atelier-lakeside.dark', 'atelier-lakeside.light', 'atelier-plateau.dark', 'atelier-plateau.light', 'atelier-savanna.dark', 'atelier-savanna.light', 'atelier-seaside.dark',
          'atelier-seaside.light', 'atelier-sulphurpool.dark', 'atelier-sulphurpool.light', 'brown_paper', 'codepen-embed', 'color-brewer', 'dark', 'darkula', 'default', 'docco', 'far', 'foundation', 'github-gist', 'github', 'googlecode',
          'grayscale', 'hopscotch', 'hybrid', 'idea', 'ir_black', 'kimbie.dark', 'kimbie.light', 'magula', 'mono-blue', 'monokai', 'monokai_sublime', 'obsidian', 'paraiso.dark', 'paraiso.light', 'pojoaque', 'railscasts', 'rainbow',
          'school_book',
          'solarized_dark', 'solarized_light', 'sunburst', 'tomorrow-night-blue', 'tomorrow-night-bright', 'tomorrow-night-eighties', 'tomorrow-night', 'tomorrow', 'vs', 'xcode', 'zenburn'
        ];
}

Hi,

I can't find a way to clear a paper-dropdown-menu. I would like to reset it to its initial state when my form is sent (ajax). I can't find anything in the demos or doc.

Also, is it possible the set the value. Exemple: pre-selected value.

Thanks a lot

I installed the latest Iron, Paper and Neon components plus the paper-dropdown-menu over it, then tried it with the supplied example.

• The dropdown element shows up...
• ...the menu shows up when I click on the dropdown...
• ...but can't make a selection from the list: the hand pointer shows over the list but nothing happens when I click to select from the list.

Chrome 44.0.2403.130 m on Windows 10.
Same issue on Firefox.

After resizing, all content is right-aligned, which is non-optimal.

While testing keyboard navigation, it's been great to tab from one element to a paper-dropdown-menu and back. However, if I press enter, then arrow to one of the menu options, then press enter again, focus is not restored to the paper-input inside the paper-menu-button. That means I can't tab to the next field after selecting a value from the paper-dropdown-menu. So, this breaks keyboard accessibility.

Currently, I've fixed this by adding the following event listener to my paper-dropdown-menu:

menu.addEventListener(
    'paper-dropdown-close',
    function () {
        Polymer.dom(this.$.menuButton).querySelector('paper-input').$.input.focus();
    }
);

So you could do something like select="0" or perhaps in another format:

<paper-dropdown-menu label="Your favourite pastry" select="0">
  <paper-menu class="dropdown-content">
    <paper-item>Croissant</paper-item>
    <paper-item>Donut</paper-item>
    <paper-item>Financier</paper-item>
    <paper-item>Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

In some cases, I need to provide descriptions of the options in my dropdown menus. However, I don't want those descriptions to show up in the selectedItemLabel. To do this, I created a simple shadow-text element with a text property that renders the text into the local DOM of that element. This excludes the shadow-text content from the selectedItemLabel. In Polymer 0.5, this worked as expected. It also works in Polymer 1.0+ in Shadow DOM mode. Under Shady DOM, the shadow-text content is included in the selectedItemLabel. This is undesirable. I've included my code for shadow-text below as well as some screenshots showing the differences in rendering.

<dom-module id="shadow-text">
    <template>
        <div>{{text}}</div>
    </template>
    <script>
        Polymer(
            {
                is: 'shadow-text',
                properties: {
                    text: {
                        type: String,
                        value: ''
                    }
                }
            }
        );
    </script>
</dom-module>

Here's how the label and description show in the dropdown:

Here's the selectedItemLabel rendering as expected under Shadow DOM:

Here's the selectedItemLabel pulling in the text from shadow-text under Shady DOM

I wasn't sure if this is an issue with this one element or with the Polymer Shady DOM implementation. Feel free to move this issue to a more relevant repo if necessary.

I was trying the new version (which is great btw) and realized that <paper-dropdown-menu> doesn't pre-select an item based on this children <paper-menu selected="1">.

IMO the expected behavior was to have <paper-item>'s second element selected, instead I have to click and select again:

Here's the code to replicate that behavior:

<!DOCTYPE html>
<html>
<head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="bower_components/paper-menu/paper-menu.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html">
</head>
<body>
    <paper-dropdown-menu label="Dropdown">
        <paper-menu selected="1" class="dropdown-content">
            <paper-item>Option A</paper-item>
            <paper-item>Option B</paper-item>
            <paper-item>Option C</paper-item>
        </paper-menu>
    </paper-dropdown-menu>
</body>
</html>

Thanks again for putting together this new version :)

Example:

<template>
  <paper-dropdown-menu>
    <paper-menu class="dropdown-content" selected="B" attr-for-selected="value">
      <paper-item value="A">test</paper-item>
      <paper-item value="B">[[abc]]</paper-item>
    </paper-menu>
  </paper-dropdown-menu>
</template>

<script>
  Polymer({is: 'my-widget',
    properties: {
      abc: {
        type: String,
        value: 'abc',
      }
    },
  });
</script>

Actual behavior: nothing is selected in the dropdown.
Expected behavior: item with value="B" ("abc") is selected in the dropdown.

Currently if you try to make a dropdown menu that allows multiple selections there are a few problems

1. Each selection causes the menu to close
2. Only the singular values are mirrored from the paper-menu back to the paper-dropdown-menu

no matter what I do, disabled is always true, the demo have the same too

The paper-dropdown-menu never show the selected value on Internet Explorer 11 and Edge. The problem is present also in the demo page of the element: https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo:demo/index.html.

Sometimes we don't want any item selected when the dropdown button is clicked and the dropdown menu is opened.

Right now, the first menu item is automatically selected when the menu is opened.

Please make the default NO selected item when the menu is opened.

In 0.5, the dropdown used to size themselves to the selected content. This ensure that when user clicked on the dropdown, the dropdown always appeared right under the mouse pointer no matter where the user clicked on it.

In 1.0 is seems that the default width doesn't take that into account. When I have very short option in the dropdown, my intuition is to click right on the selected word to open it, and then I always end up having to move my mouse to the right to reach the options dropdown.

Can it be sized so that it's either only as wide as the selected option (as it was before) or just as wide at the menu will be when opened?

Hello,
It could be perfect if this element could have Polymer.IronFormElementBehavior support. Maybe this support can be added at a lower level, for example iron-select ?

Anthony.

Example: if we want to reproduce something like this: https://twitter.github.io/typeahead.js/examples/

Right now, we can't keep the dropdown open while typing in another input. Maybe we could choose on wich input put the focus on when the dropdown is opening.

I believe that this issue (PolymerElements/paper-menu-button#9), may also have the potential to apply to this element.

Stack overflow question and jsbin example are referenced directly below for convenience sake:

http://stackoverflow.com/questions/31884654/paper-menu-buttons-dropdown-paper-menu-not-overlaying-other-iron-list-items

http://jsbin.com/kuyovuh/1/edit?html,output

I used Firefox 40 and Chrome 45 on fedora 22. Open the below jsbin in chrome browser.

http://jsbin.com/curike/edit?html,output

1. Once I click the dropdown I get an error message on the console: "Uncaught TypeError: Cannot read property 'toString' of null".
2. I click outside the overlay and the overlay does not close.
3. I select a value within the overlay and I get an additional error message on the console: "Uncaught TypeError: Cannot read property '_bound' of null".
4. The overlay does not close if I click on an already selected value.

Edit: Updated jsbin.

I've been trying to style the paper-menu-button inside the paper-dropdown-menu using the --paper-dropdown-menu-button but it doesn't seem to work as described. The only way I've been able to make it work is using the deprecated /deep/combinator.

The following code shows this behaviour (I'm trying to remove padding from the paper-menu-button):

  <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
      <title>psi-plotly-config Demo</title>
      <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
      <link rel="import" href="../../paper-material/paper-material.html"></link>
      <link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu.html"></link>
    </head>
    <body>

      <template is="dom-bind" id="app">
        <style is="custom-style">

          :root {
            --paper-menu-button {
              padding: 0px;
            };

            --paper-dropdown-menu-button {
              padding: 0px;
            };
          }

          paper-material {
            padding: 10px;
            margin-bottom: 20px;
            background-color: gray;
          }

          paper-dropdown-menu {
            background-color: lightgray;
          }
        </style>

        <paper-material>
          <paper-dropdown-menu label="Type" class='first'>
            <paper-menu class="dropdown-content">
              <paper-item>lines</paper-item>
              <paper-item>markers</paper-item>
            </paper-menu>
          </paper-dropdown-menu>
        </paper-material>

      </template>

    </body>
  </html>

Is this a bug or do I need to use shared styles (https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules)?

The following 2 posts on SO describe the general problem well:

• http://stackoverflow.com/questions/31125919/remove-style-scope-from-nested-elements-in-polymer-1-0#
• http://stackoverflow.com/questions/30538172/unable-to-style-paper-drawer-panel-in-polymer-1-0-using-custom-css-mixins

By default the attribute horizontal-align is set to right and vertical-align is set to top.

Is there a reason why the attributes horizontal-align and vertical-align are not exposed to be set through paper-dropdown-menu?

See: http://jsbin.com/sawutixafu/edit?html,output

In the paper-dropdown-menu documentation, there's an example with a pre-selected value using the 'selected' attribute.
https://github.com/PolymerElements/paper-dropdown-menu/blob/master/demo/index.html

But, the 'selected' attribute doesn't appear on the actual documentation page.
https://elements.polymer-project.org/elements/paper-dropdown-menu

Since paper-items (a very common use case I would think) don't have a label property, the following won't work as expected. Instead of selectedItemLabel being "Pizza", it's "Burgers".

<paper-dropdown-menu label="Favorite food">
    <paper-menu class="dropdown-content" attr-for-selected="label">
        <paper-item label="Pizza">Burgers</paper-item>
    </paper-menu>
</paper-dropdown-menu>

On mobile the paper-menu dropdown will not open when you tap on any point of the paper-dropdown-menu, as happens when you click from desktop. The menu will open only when you tap the dropdown icon on the right of the text.

On "_release": "1.0.5", my code broke and now all the paper-dropdown-menu appear with the invalid state colors.

Seaching for the code I found:

    <paper-ripple></paper-ripple>
    <paper-input
      invalid="[[invalid]]"

but there are no binding to that 'invalid' variable, maybe that's the issue.

Regards

We should enable optgroup analogy in paper-dropdown-menu

Originally opened in PolymerElements/iron-form#49, but actually lives.

Hi.

Is there a way to bind the selected item in the paper-dropdown-menu to object property? This was the way how to do in 0.5:

<paper-dropdown-menu label="{{i18n.label}}">
  <paper-dropdown class="dropdown">
    <core-menu class="menu"
               valueattr="id"
               selected="{{prj.selitem}}">
      <template repeat="{{fs in prj.list}}">
        <paper-item id="{{fs}}">{{fs | xlate}}</paper-item>
      </template>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

With the above solution I could bind the selected item to prj.selitem. What is the right solution in 1.0??? How do I trigger the change of prj.selitem? Do I have to provide a function for that in which I have to call this.set('prj.selitem', item) or something like this?

Would you please provide an example or make a section in the documentation?

Hi,

After a few tests, I managed to see that if paper-menu isn't included, there is no way to select any of the elements of the submenu. Shouldn't that be documented ?

hi,

i have a paper-dropdown-menu with a nested paper-menu with a list of paper-item's. The items are rendered with a dom-repeat from a list a data values. If i change the list of value's the paper-menu contains the new values, but the paper-dropdown-menu still contain's the old selected item, which is an illegal value now because the selected value of the dropdown is not contained in the new list.

It get's really ugly if the old and new list of paper-item's contains only one element with different values. As the selected property of paper-menu does not change (it was 0 and it is 0 with the new list), no event is fired when i click the new value in the new list. --> i cannot select the single value from my new menu list. Well i can select it with paper-menu, but this value is not reflected in papwer-dropdown-menu.

it would be great to have the option to bind the selected-item explicitly

If I use something like:

<paper-dropdown-menu label="Choose an item" selectedItemLabel="{{mybind}}">
  <paper-menu class="dropdown-content">
    <template is="dom-repeat" items="[[items]]">
      <paper-item label="[[item.id]]">[[item.text]]</paper-item>
    </template>
  </paper-menu>
</paper-dropdown-menu>

once selected the item, instead of showing it, it shows it item's label (in this case, the item.id value). It behaves like that for every item in the repeat template but the first one.

In the demo, if you tab to the "Pre-selected Value" example the text "brontosaurs" is selected by the caret (white text on blue background, ready to be copied to clip board).

It would be better if the text was not selected by the caret, but the whole was highlighted as per

One of the use cases for a dropdown is to use it inside of a <form>.

Would be awesome if we could include attributes such as error-message, required, etc, and methods like validate() as seen on <paper-input>.

What do you think?

A paper-dropdown-menu inside a dialog will get clipped and be not fully accessible inside a dialog.

The way it's currently implemented, there is no way of keeping the dropdown menu from closing when you deselect an item.

Example:

<dom-module id="my-component">
  <template>
    <paper-dropdown-menu id="dropdownMenu">
      <iron-selector id="selector" class="dropdown-content" multi>
          <paper-checkbox checked>foo</paper-checkbox>
          <paper-checkbox checked>bar</paper-checkbox>
          <paper-checkbox checked>foo bar</paper-checkbox>
      </iron-selector>
    </paper-dropdown-menu>
  </template>
</dom-module>

The dropdown closes when any checkbox is closed. The following workaround keeps the issue from happening, but it's not very elegant:

  ready: function() {
    this.$.dropdownMenu.$.menuButton.ignoreSelect = true;
  }

As this is used to select values, it would likely be used on a form and could need to be a required field. It does not validate though. And the paper-input child element always validates as true.

I use firefox 40 and chrome 45. The issue exists in both the browsers. The demo page for paper-dropdown-menu can be used to recreate the issue. When the drop down is opened, the scroll bar on the main window disappears.

https://elements.polymer-project.org/elements/paper-dropdown-menu?view=demo

With Voiceover/Chrome: I'm not getting feedback that this is a dropdown menu. When I then open the menus, I can't use the screen reader to navigate through the items. I honestly wouldn't know that this dropdown was there if I was non-visual.

On Chrome OS / Chromevox, this isn't as much of an issue. It tells me that ""group has popup"", instead of letting me know it's a dropdown or combobox. It tells me that the group has popup every time I try to navigate to the next item in the list though. This is really verbose.

Still need to test experience on Windows.

I see that this component has a ripple effect and that this is the behavior shown in the Material Design spec. My question is this: Since this component is based on paper-input and paper-input no longer has a ripple, why does paper-dropdown-menu have a ripple?

https://www.google.com/design/spec/components/menus.html#menus-usage

The paper-dropdown-menu doesn't work properly when it's inside the drawer of a paper-drawer-panel in narrow layout state, the paper-menu dropdown will not open. It works normally when the paper-drawer-panel is not in the narrow state

When a paper-dropdown-menu is inside a drawer of a paper-drawer-panel in the narrow state and you try to use the dropdown by tap in mobile mode, strange things will happens.

Firstly, the dropdown will open only when you tap on a specific area of the item:

You can also notice from the above gif that the dropdown is sized and positioned incorrectly.
Also, I noticed this strange behavior that occur when you resize the screen and that hopefully can be useful to understand the erroneous sizing of the dropdown:

It should behave like a element. That is, when I open the menu I should be able to move up/down with the up/down keys and the potential new selection should be highlighted.

The solution may be to just remove the docs for these events, as the opened notify property may be enough?

Why does horizontal-align on #menuButton default to right instead of left? There should at least be a property on paper-dropdown-menu for us to modify this without having to modify this.$.menuButton.horizontalAlign.

I noted that this element imports the full iron-icons set for the arrow-drop-down icon. As I watch polycast, this is bad for the performance. Maybe the iron-icons import should be removed for that reason.

From the spec

Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element.

The intended behaviour is also shown in the demo animation

I think this has to do with something wrong in my dependencies or something. The thing is when I select an item, it becomes selected but the dropdown won't close and an error "Uncaught TypeError: Cannot set property 'right' of undefined"
The same happens when running your demo from my project.

Also, I'm seeing the same behavior as #3 , is that normal?