javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 07:41:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(menu): dismiss when clicking outside

Browse Source 
fixes #15096
This commit is contained in:
Manu Mtz.-Almeida
2018-08-08 18:15:07 +02:00
parent dd114ffe15
commit 288eeb54ee
6 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/menu/menu.scss
View File

@ -66,15 +66,12 @@ ion-backdrop {
.menu-content-open { .menu-content-open {
cursor: pointer; cursor: pointer;
touch-action: manipulation; touch-action: manipulation;
}
.menu-content-open {
// the containing element itself should be clickable but // the containing element itself should be clickable but
// everything inside of it should not clickable when menu is open // everything inside of it should not clickable when menu is open
pointer-events: none; pointer-events: none;
} }
@media (max-width: 340px) { @media (max-width: 340px) {
.menu-inner { .menu-inner {

10
core/src/components/menu/menu.tsx
View File

@ -214,13 +214,18 @@ export class Menu {
@Listen('body:click', { enabled: false, capture: true }) @Listen('body:click', { enabled: false, capture: true })
onBackdropClick(ev: any) { onBackdropClick(ev: any) {
const path = ev.path; if (this.lastOnEnd < ev.timeStamp - 100) {
if (path && !path.includes(this.menuInnerEl) && this.lastOnEnd < ev.timeStamp - 100) { const shouldClose = (ev.composedPath)
? !ev.composedPath().includes(this.menuInnerEl)
: false;
if (shouldClose) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();
this.close(); this.close();
} }
} }
}
@Method() @Method()
isOpen(): boolean { isOpen(): boolean {
@ -481,7 +486,6 @@ export class Menu {
<div <div
class="menu-inner" class="menu-inner"
ref={el => this.menuInnerEl = el} ref={el => this.menuInnerEl = el}
onClick={this.onBackdropClick.bind(this)}
> >
<slot></slot> <slot></slot>
</div>, </div>,

2
core/src/components/split-pane/split-pane.ios.scss
View File

@ -5,7 +5,7 @@
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
.split-pane-ios.split-pane-visible > .split-pane-side[side=start] { .split-pane-ios.split-pane-visible > .split-pane-side {
min-width: $split-pane-ios-side-min-width; min-width: $split-pane-ios-side-min-width;
max-width: $split-pane-ios-side-max-width; max-width: $split-pane-ios-side-max-width;

2
core/src/components/split-pane/split-pane.md.scss
View File

@ -4,7 +4,7 @@
// Split Pane // Split Pane
// -------------------------------------------------- // --------------------------------------------------
.split-pane-md.split-pane-visible > .split-pane-side[side=start] { .split-pane-md.split-pane-visible > .split-pane-side {
min-width: $split-pane-md-side-min-width; min-width: $split-pane-md-side-min-width;
max-width: $split-pane-md-side-max-width; max-width: $split-pane-md-side-max-width;

2
core/src/components/split-pane/split-pane.scss
View File

@ -39,7 +39,7 @@
display: none; display: none;
} }
.split-pane-visible > .split-pane-side[side=start] { .split-pane-visible > .split-pane-side {
order: -1; order: -1;
} }

2
core/src/components/split-pane/test/basic/index.html
View File

@ -13,7 +13,7 @@
<ion-app> <ion-app>
<ion-split-pane id="splitPane"> <ion-split-pane id="splitPane">
<ion-menu side="end"> <ion-menu side="start">
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">