Is there a way use paper-dropdown-menu to let the user select multiple items when the dropdown opens and then close it by tapping outside of it? Currently, the dropdown closes each time one item is tapped. I think this question is similar to this one, but I do not understand how to proceed with the solution mentioned there. Thanks!
<paper-dropdown-menu label="General">
<paper-dropdown class = "dropdown">
<core-menu class = "menu" multi>
<paper-item name = "item1">item1</paper-item>
<paper-item name = "item2">item2</paper-item>
<paper-item name = "item3">item3</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
I think paper-dropdown-menu/ core-dropdown-menu isn't for your case. Because they always toggle state. But you can open menu manually as in this (openDropdown function)
Related
I have a paper dropdown menu polymer web component whose value changes on ajax call, the problem is that i have set the selected property to 0, so when the listserial changes on ajax call i am still seeing the pervious first value of listserials, i tried attr-for-selected so that i select the first serial from listserials, but it doesn't show any selected serial on ajax call
<paper-dropdown-menu id="accountTypeDropdown" on-iron-
select="_itemSelected">
<paper-listbox slot="dropdown-content" selected=0>
<template is="dom-repeat" items="{{listSerials}}">
<paper-item>{{item.serialno}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
I am trying to use the paper-dropdown-menu and paper-listbox like a select input field which should automatically set the update the value of the field upon selection.
<paper-dropdown-menu label="Offense">
<paper-listbox slot="dropdown-content" class="dropdown-content" attr-for-selected="value" selected="{{player.position}}" fallback-selection="N-None">
<paper-item value="WR-Wide Receiver">WR-Wide Receiver</paper-item>
<paper-item value="ATH-Athlete">ATH-Athlete</paper-item>
<paper-item value="N-None">N-none</paper-item>
</paper-listbox>
</paper-dropdown-menu>
But upon selection, the dropdown refuses to disappear
The offical docs don't seem to mention how to use the two of them together to use like a select field.
Have you tried using an attribute name different from value?
I have experienced issues with certain attribute names that are defined in the HTML specs. Try testxyz instead of value as attribute name and see if that works for you.
How to navigate iron-selector items using arrow keys?
<template is="dom-repeat" items="[[icons]]">
<iron-icon icon="[[item.name]]"/>
</template>
You would need to use a combination of iron-a11y-keys and an array to keep track of what order your iron-selector items are in. iron-a11y-keys will allow to perform a javascript method when a specific key is pressed, then in that method you will need to determine what iron-selector item to transition to.
update 1: found this issue with pull request which seems to be addressing this issue in Polymer.
update 2: Decided to restructure my layout based on the Polymer Starter Kit which uses page.js instead of app-router, and seems to work well, although they don't use paper-item in paper-menu but instead use custom anchor elements.
Search every bit of documentation but I can't find this (although there is another issue on stackoverflow with almost the same title, not same thing)
TLDR: I need to have to whole paper-item clickable to the link. Not just the text itself. See image below for clarity and here is the live code.
.
I've got something like the code below. I'm using link tags in combination with app-router routing which works great. The only problem is: I would like to have have the entire paper-menu-item to be clickable with the link tag.
When I use below code, the right page is retrieved when clicking directly on the link tekst itself, but that doesn't create a "selected" state. When I click on the button (just off the text) then the button IS selected but the page isn't retrieved because I didn't click the link...
There must be an easy way to do this right? I mean, I could force this by overriding all the CSS but it seems to me a link in a paper-item in a paper-menu would be a very common thing which should do this automatically or with an attribute or someting?
<paper-menu class="list">
<paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
<paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>
I checked documentation on paper-item, paper-menu and others but those never use an example with a link.
IMO, the most clean way is to just drop the links altogether and just add on-tap event.
(You can also use dom-repeat for your menu)
<paper-menu class="list">
<paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
<paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>
I'm assuming your are using <a> tags because of app-router.
From app-router doc:
go(path, options) - You can call the router from Javascript to navigate imperatively.
Then you can simple write your own on-tab handler and use custom attribute (mypath) on each <paper-item>
Polymer({
is: 'your-menu',
menuSelected: function (e) {
var mypath = e.currentTarget.getAttribute('mypath');
document.querySelector('app-router').go(mypath);
},
})();
Add class="flex" to each of your anchor tags.
I need to bind a datalist to a paper-input element, something like we have here HTML5 DataList Example. It does not work as the example shows, can someone please help. Thank you.
From your question, I don't believe a paper-input is what you are looking for. If you look at the documentation at The Polymer Project it describes the paper-input as "paper-input is a single-line text field for user input".
What you might be looking for is the paper-dropdown-menu (<-- look at ths link) with a core-menu as the element you are going to bind your data to.
I included a skeleton of how you would bind your data. Remember that you still need to add all the references to the Polymer elements, and polyfills.
<template is="auto-binding">
<!-- other content -->
<paper-dropdown-menu>
<paper-dropdown class="dropdown colored">
<core-menu class="menu">
<template repeat="{{countries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.countries= [
'Mexico',
'United States',
'Canada'
];
</script>
As recommended by this reply, you could wrap paper-input-decorator with input and datalist inside.
You would have the same result as with paper-input but more explicit and therefore more customizable.