diff --git a/README.md b/README.md index 91f8a2f..d8459b0 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,8 @@ SystemJS | popperShowOnStart | number | 0 | | popperTrigger | Trigger(string) | hover | | popperPositionFixed | boolean | false | - | popperCloseOnClickOutside| boolean | true | + | popperHideOnClickOutside | boolean | true | + | popperHideOnScroll | boolean | false | | popperForceDetection | boolean | false | | popperTrigger | Trigger(string) | hover | | popperModifiers | popperModifier | undefined| diff --git a/example/app/app.component.html b/example/app/app.component.html index 78fab07..d9d7afb 100644 --- a/example/app/app.component.html +++ b/example/app/app.component.html @@ -1,4 +1,4 @@ -
+
sub.unsubscribe && sub.unsubscribe()); this.subscriptions.length = 0; - this.clearGlobalClick(); + this.clearEventListeners(); } toggle() { @@ -194,7 +212,8 @@ export class PopperController implements OnInit, OnChanges { if (this.timeoutAfterShow > 0) { this.scheduledHide(null, this.timeoutAfterShow); } - this.globalClick = this.renderer.listen('document', 'click', this.hideOnClickOutside.bind(this)) + this.globalClick = this.renderer.listen('document', 'click', this.hideOnClickOutsideHandler.bind(this)); + this.globalScroll = this.renderer.listen(this.getScrollParent(this.getRefElement()), 'scroll', this.hideOnScrollHandler.bind(this)); } hide() { @@ -211,7 +230,7 @@ export class PopperController implements OnInit, OnChanges { (this.content as PopperContent).hide(); } this.popperOnHidden.emit(this); - this.clearGlobalClick(); + this.clearEventListeners(); } scheduledShow(delay: number = this.showDelay) { @@ -251,8 +270,9 @@ export class PopperController implements OnInit, OnChanges { this.showTrigger = this.showTrigger || PopperController.baseOptions.trigger; } - private clearGlobalClick() { + private clearEventListeners() { this.globalClick && typeof this.globalClick === 'function' && this.globalClick(); + this.globalScroll && typeof this.globalScroll === 'function' && this.globalScroll(); } private overrideShowTimeout() { @@ -288,4 +308,19 @@ export class PopperController implements OnInit, OnChanges { this.subscriptions.push(popperRef.onHidden.subscribe(this.hide.bind(this))); } + private getScrollParent(node) { + const isElement = node instanceof HTMLElement; + const overflowY = isElement && window.getComputedStyle(node).overflowY; + const isScrollable = overflowY !== 'visible' && overflowY !== 'hidden'; + + if (!node) { + return null; + } else if (isScrollable && node.scrollHeight >= node.clientHeight) { + return node; + } + + return this.getScrollParent(node.parentNode) || document; + } + + } \ No newline at end of file