Polymer: "Paper-menu-menu" button does not close when opening the "Paper Handling" dialog box
I have a menu button "Paper", and on the same page - a dialog for actions with paper. For example:
function openDialog() {
document.querySelector('#dialog').toggle();
};
<script src="//www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="//www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dialog/paper-action-dialog.html">
<link rel="import" href="//www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-button/paper-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="//www.polymer-project.org/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="//www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="//www.polymer-project.org/components/paper-item/paper-item.html">
<paper-action-dialog id="dialog" heading="Dialog Title" backdrop>
<p>Some content</p>
<paper-button dismissive>More Info</paper-button>
<paper-button affirmative>Decline</paper-button>
<paper-button affirmative>Accept</paper-button>
</paper-action-dialog>
<button type="button" onclick="openDialog()">Click Me!</button>
<br/> <br/>
<paper-menu-button>
<paper-icon-button icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
When I click to open the menu button and do not close it, and click the button to open the action dialog, the menu button remains open. I tried to close it with
document.querySelector('core-overlay-layer').opened = false;
and with:
$('core-overlay-layer').removeClass('core-opened');
but the core-overlay doesn't close properly this way, and if you try to open the menu button again, the first time you press it, it will close the last open hidden menu button. What is the correct way to close the menu button before opening the action dialog?
+3
source to share
1 answer
I was noticed in the documentation for the component: button-menu-button.
overlayListeners: {
'core-overlay-open': 'openAction',
'core-activate': 'activateAction'
},
activateAction: function() {
this.opened = false;
}
So, I would do:
function openDialog() {
document.querySelector('#dialog').toggle();
document.querySelector('paper-menu-button').opened = false;
};
The property of the entire element is opened.
0
source to share