http://customelements.io/?q=core-dropdown

Hi
I have an input box. As soon as somebody starts typing in it it will open the dropdown.

BUT I want the user to be able to keep on typing in the input box - which doesn't work because the dropdown steals the input focus.

Can you please fix that.

Cheers
Bernd

I've got an error while bower installing. I met this error when I was using yeoman polymer generator. see please yeoman/generator-polymer#72

here is a error message:

bower ENORESTARGET  No tag found that was able to satisfy >=0.4.0 <1.0.0

Additional error details:
No versions found in git://github.com/Polymer/core-dropdown.git

When using an element extending core-dropdown-base such as core-menu-button, the element should not call toggleOverlay if it has a disabled attribute or disabled="true" when in focus and user presses enter or space.

Due to my layout, I have to use the 'layered' attribute, but I also want the dropdown to appear below the trigger, not on top of it. Currently, adding a margin to a layered dropdown doesn't change the position the same way as the nested. Using the layered further makes it more difficult because it changes the scope of the css.

However, more than worrying the margin issue, I'd rather see there be an option to align the top of the dropdown to the bottom of the trigger or visa versa, without having to add custom css. This use-case is very common in menus so I think it warrants a built in option.

There is no equivalent element in Polymer 0.9. core-dropdown or an equivalent is very useful...

Here is a basic except of my custom dart/polymer component:

<a id="row-options-button" class="optionsBtn" href="#" style=""
            title="Options" on-click="{{ openDropdown }}" relative>
             <i id="ellipsisIcon" class="icon fa fa-ellipsis-v"></i>
             <core-dropdown id="optionsDropDown" class="colored" layered="true" autoCloseDisabled="false">
                 <core-selector single valueattr="label">
                    <core-item label="Display for 8 seconds"></core-item>
                 </core-selector>
             </core-dropdown>
         </a>
    </template>
</polymer-element>

The problem/bug:
Clicking on a new instance of this component does NOT close the previous opened dropdown. Sometimes this is true while clicking different elements too.

Maybe I'm missing something, but is there a global way to closing all instances of a core-dropdown, even if they reside under Shadow Dom?, as an alternative I mean...

The documentation is insufficient, simple dropping the example code does not produce a working drop down menu:

<template is="auto-binding">
  <div relative>
    <core-icon-button id="trigger" icon="menu"></core-icon-button>
    <core-dropdown relatedTarget="{{$.trigger}}">
      <core-menu>
        <core-item>Cut</core-item>
        <core-item>Copy</core-item>
        <core-item>Paste</core-item>
      </core-menu>
    </core-dropdown>
  </div>
</template>

Even dropping this into the demo page and importing the required elements does not work.

The demo page seems to rely on an event handler to toggle the dropdown menu, this is not mentioned in the documentation at all.

I was trying to set the currently selected item in the Core Dropdown programmatically using selectedItem.

The code looks like this:

List<Item> items = toObservable( [
  {"id": "A", "name": "Apple"},   
  {"id": "B", "name": "Ball"}, 
  {"id": "C", "name": "Cat"}
] );
CoreDropdown dropdown = shroot.querySelector("core-dropdown");
dropdown.selectedItem = items[0].id;

Edit:
I believe the issue was closed. Last comment I read was to use dropdown.selected instead. I also tried that, but had the same issue.

Might be similar to issue #12.

1. Go to demo page https://www.polymer-project.org/components/core-dropdown/demo.html
2. In the "Scrolling and margin" demo, open either dropdown
3. Scroll (by dragging the scrollthumb instead of the mousewheel) to United States and try to select United States.

Result: The dropdown closes when you release the mouse after scrolling to the desired item.
Expected: The dropdown remains open after using the scrollbar.

Workaround: Mousewheel scroll seems to work ok.

Hi @morethanreal

After this commit (035f49d), we noticed we started to get this error when bower installing:

bower core-dropdown#>=0.3.0 <1.0.0                ENORESTARGET
Additional error details:
No versions found in git://github.com/Polymer/core-dropdown.git

Any advice on getting around this? I'm assuming it is because of the name change?

Thanks!
Jaime

When I click the core-icon-button, the core-dropdown does not appear.

<link rel="import" href="../core-dropdown/core-dropdown.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-tooltip/core-tooltip.html">
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="settings-button">

  <template>
    <core-tooltip label="Settings" position="left">
      <div style="display: inline-block; position: relative">
        <core-icon-button id="trigger" icon="settings"></core-icon-button>
        <core-dropdown relatedTarget="{{$.trigger}}" halign="right">
          <div>Settings</div>
        </core-dropdown>
      </div>
    </core-tooltip>
  </template>

  <script>
    (function () {
      Polymer({});
    })();
  </script>

</polymer-element>

Hi
I am trying to open a core-dropdown below the trigger element. The doc says that this can be achived via css. But the _shouldPosition is always true so my custom css positioning is overwritten.

I see 2 ways to solve this

1. make _shouldPosition a published property so that the user can indicate that there is custom css.
2. add the ability to core-dropdown and others to open below the trigger element, not just only on top of it (which is a very strange thing to do anyway).

Cheers
Bernd

When using paper-dropdown..

Due to the code that is calculating the size of the dropdown, it always seems to come out with a size of the scroller at 304px. Need to be able to specfify an overriding value for the scroller/dropdown size, I have only 8 items in the list but not all are visible when there is plenty of vertical space.

I am using the code below, the target of the core-dropdown at expansion is some animation...

                <paper-dropdown id="machinesDropdown" class="dropdown" layered>
                  <core-menu id="machinesDropdownMenu" class="menu"  selectedItem="{{selectedMachineTypeItem}}" selected="{{machinetype}}" valueattr="id" >
                    <template repeat="{{machinetype in machinetypes}}">
                      <paper-item id="{{machinetype.id}}" class="listitem" >
                        <div class="listitem">{{machinetype.type}}</listitem>
                      </paper-item>
                    </template>
                  </core-menu>
                </paper-dropdown>

setting the height of the scroller by css, or code is always overwritten by the following in core-dropdown's positionTarget method.

    // explicitly set width/height, because we don't want it constrained
      // to the offsetParent
      var target = this.sizingTarget;
      var rect = this.measure();
      target.style.width = Math.ceil(rect.width) + 'px';
      target.style.height = Math.ceil(rect.height) + 'px';

I would suggest an attribute that allows overriding this width and height, with either removing the width/height style which means the scroller will size to its contents, or allowing some other method to ensure all the contents are visible when there is screen real estate to show it.

Core dropdown base implements a on-tap which toggles the overlay, this should be disabled by an attribute as if you have buttons or other tappable components in the overlay, the overlay closes..

I had to override with

  ready: function(){
        this.$.menu_popup.toggleOverlay = function(){};
      },

where menu_popup is the core-dropdown-base

I believe core-dropdown-base should be merged into core-dropdown or core-dropdown-menu no need for a separate element that confuses the overall dom tree.

Hi,
when clicking frequently on core-dropdown with paper elements, a null error appears on console.
I guess this is because rendering of paper elements takes a while with its fancy animations, but a new click in the dropdown causes that to happen. The sample code attached below - tried in Chrome "Version 38.0.2125.111 m", on PC/Win7. It is enough to make a series of quick double-clicks on dropdown to get an error msg in console.

Would some kind of check for null or action deferral be needed?

Best regards,
PawelS.

<polymer-element name="login-info" attributes="loggedin user" noscript>
    <template>
            <template if='{{loggedin}}'>
                <paper-menu-button>
                    <paper-item>
                        <span class="puser">User: {{user}}</span>
                    </paper-item>
                    <paper-dropdown class="dropdown">
                        <paper-item>
                            <span class="puser">User: {{user}}</span>
                        </paper-item>
                        <paper-item on-click="{{buttonOnLogout}}">LogOut</paper-item>
                    </paper-dropdown>
                </paper-menu-button>
            </template>
    </template>
</polymer-element>

Using the core demo at https://www.polymer-project.org/components/core-elements/demo.html on both a TF201 and Nexus 5 with up to date Chrome, I cannot select any of the options of the dropdowns. One of the dropdown menus works as expected but otherwise they don't appear, appear and disapear on the second click, sometimes while selecting something that isn't really displayed. Upwards dropdowns seem to be more successful.