防止多選擇紙張下拉菜單中的菜單關閉。聚合物1.0

我在下面的代碼段中實現了一個多選下拉菜單。它似乎工作正常。但是，每次我選擇一個項目時，菜單都會關閉。我希望菜單保持打開狀態，直到用戶單擊「完成」按鈕。防止多選擇紙張下拉菜單中的菜單關閉。聚合物1.0

奇怪的是，如果我取消選擇一個項目，菜單保持打開狀態，但如果我選擇了一個項目，菜單會關閉。

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>

來源

2016-03-28 Bob Woodley

關閉/打開菜單的paper-dropdown-menu的控制使用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作品中的「紙張菜單多選擇」 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應該是這樣的（我主要是在飛鏢框架工作）進行設置：

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

來源

2016-04-05 16:44:28

有人把打開的問題暴露在'這個屬性紙下沉菜單：https：//github.com/PolymerElements/paper-dropdown-menu/issues/53?_pjax=%23js-repo-pjax-container –

太好了。從規範ignoreSelect不支持，所以我沒有看到這些問題，但解決方案與我所建議的相同。只需添加，在紙張菜單按鈕，這是一個常見的錯誤。 –

防止多選擇紙張下拉菜單中的菜單關閉。聚合物1.0

回答

相關問題