{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ゆ 、 Hurt° 的问题《Prevent menu close on multi select paper-dropdown-》','https://www.manongdao.com/q-826490.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have implemented a multi-select drop-down menu in the snippet below. It seems to work fine. However, each time I select an item, the menu closes. I'd like the menu to stay open until the User clicks a 'done' button.
Strangely enough, the menu stays open if I deselect an item, but closes if I selected an item.
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0;
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
paper-button {
margin: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-menu/paper-menu.html">
</head>
<body>
<foo-drop ></foo-drop>
<dom-module id="foo-drop">
<template>
<paper-dropdown-menu label="Your favourite pastry">
<paper-menu id="myMenu" class="dropdown-content" multi>
<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>
</template>
<script>
Polymer({
is: "foo-drop",
ready: function() {
window.addEventListener('WebComponentsReady', function() {
var menu = document.querySelector("#myMenu");
menu.addEventListener("iron-select", function(e, detail){
console.log(menu.selected);
console.log(menu.selectedItems.length);
for (var i = 0; i < menu.selectedItems.length; i++)
console.log(menu.selectedItems[i].value);
});
});
}
});
</script>
</dom-module>
</body>
</html>
The control of close/open of the menu in
paper-dropdown-menuusespaper-menu-button. https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L150The specification states set
ignoreSelecttotrue. https://elements.polymer-project.org/elements/paper-menu-buttonThere is a bug on this https://github.com/PolymerElements/paper-menu-button/issues/58
But maybe works in your environment (works at least on Chrome and Firefox). Check if the
ignore-selectworks in the "Paper Menu with multi selection" https://elements.polymer-project.org/elements/paper-menu-button?view=demo:demo/index.html&active=paper-menu-buttonIf it does, then from the
paper-dropdown-menuget the underlyingpaper-menu-buttonand setignoreSelect = true;With
The set
ignoreSelectshould be set with something like this (I mainly work in the Dart framework):