Verhindert das Schließen des Menüs im Mehrfachauswahl-Dropdown-Menü. Polymer 1.0

Ich habe ein Multi-Select-Drop-Down-Menü in das Snippet unten implementiert. Es scheint gut zu funktionieren. Jedes Mal, wenn ich ein Element auswähle, wird das Menü jedoch geschlossen. Ich möchte, dass das Menü geöffnet bleibt, bis der Benutzer auf "Fertig" klickt.Verhindert das Schließen des Menüs im Mehrfachauswahl-Dropdown-Menü. Polymer 1.0

Seltsamerweise bleibt das Menü offen, wenn ich ein Element abnehme, aber schließt, wenn ich ein Element auswähle.

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>

Quelle

2016-03-28 Bob Woodley

Die Steuerung der Schließen/Öffnen des Menüs in paper-dropdown-menu verwendet paper-menu-button. https://github.com/PolymerElements/paper-dropdown-menu/blob/master/paper-dropdown-menu.html#L150

Die Spezifikation gibt ignoreSelect bis true an. https://elements.polymer-project.org/elements/paper-menu-button

Es ist ein Fehler auf dieser https://github.com/PolymerElements/paper-menu-button/issues/58

Aber funktioniert vielleicht in Ihrer Umgebung (funktioniert zumindest auf Chrome und Firefox). Überprüfen Sie, ob die ignore-select Werken im „Menü Papier mit Mehrfachauswahl“ https://elements.polymer-project.org/elements/paper-menu-button?view=demo:demo/index.html&active=paper-menu-button

Ist dies der Fall, dann aus dem paper-dropdown-menu erhalten die zugrunde liegenden paper-menu-button und setzen ignoreSelect = true;

Mit

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

Das Set ignoreSelect sollte so etwas eingestellt werden (ich hauptsächlich im Rahmen Dart arbeiten):

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

Quelle

2016-04-05 16:44:28

Irgend jemand hat ein Problem eröffnet diese Eigenschaft zu belichten in ' Papier-Drowdown-Menü: https://github.com/PolymerElements/paper-dropdown-menu/issues/53?_pjax=%23js-repo-pjax-container –

Großartig. Von der Spezifikation wurde ignoreSelect nicht unterstützt, daher habe ich mir die Probleme nicht angesehen, aber die Lösung ist identisch mit der, die ich vorgeschlagen habe. Nur mit hinzufügen, dass in Papier-Menü-Taste, gibt es einen regelmäßigen Fehler dazu. –

Verhindert das Schließen des Menüs im Mehrfachauswahl-Dropdown-Menü. Polymer 1.0

Antwort

Verwandte Themen