防止在多个 select 纸质下拉菜单上关闭菜单。聚合物1.0

Question

我在下面的代码片段中实现了一个多 select 下拉菜单。它似乎工作正常。但是，每次我 select 一个项目时，菜单都会关闭。我希望菜单保持打开状态，直到用户单击 'done' 按钮。

奇怪的是，如果我删除select一个项目，菜单会保持打开状态，但如果我select编辑一个项目，菜单就会关闭。

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>

Answer 1

paper-dropdown-menu中菜单close/open的控件使用paper-menu-button。 https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L150

规范状态将 ignoreSelect 设置为 true。 https://elements.polymer-project.org/elements/paper-menu-button

这里有一个错误 https://github.com/PolymerElements/paper-menu-button/issues/58

但也许适用于您的环境（至少适用于 Chrome 和 Firefox）。检查 ignore-select 是否适用于 "Paper Menu with multi selection" https://elements.polymer-project.org/elements/paper-menu-button?view=demo:demo/index.html&active=paper-menu-button

如果是，则从 paper-dropdown-menu 获取基础 paper-menu-button 并设置 ignoreSelect = true;

有

<paper-dropdown-menu id="id_my-paper-dropdown-menu">

集合ignoreSelect应该这样设置（我主要在Dart框架下工作）：

this.$.id_my-paper-dropdown-menu.$.menuButton.ignoreSelect = true;

防止在多个 select 纸质下拉菜单上关闭菜单。聚合物1.0

Prevent menu close on multi select paper-dropdown-menu. Polymer 1.0

polymer-1.0