diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js index 6545d1861c..8c4312e617 100644 --- a/packages/popover/src/vaadin-popover.js +++ b/packages/popover/src/vaadin-popover.js @@ -453,6 +453,7 @@ class Popover extends PopoverPositionMixin( this.__onTargetClick = this.__onTargetClick.bind(this); this.__onTargetFocusIn = this.__onTargetFocusIn.bind(this); this.__onTargetFocusOut = this.__onTargetFocusOut.bind(this); + this.__onTargetMouseDown = this.__onTargetMouseDown.bind(this); this.__onTargetMouseEnter = this.__onTargetMouseEnter.bind(this); this.__onTargetMouseLeave = this.__onTargetMouseLeave.bind(this); @@ -550,6 +551,7 @@ class Popover extends PopoverPositionMixin( target.addEventListener('click', this.__onTargetClick); target.addEventListener('mouseenter', this.__onTargetMouseEnter); target.addEventListener('mouseleave', this.__onTargetMouseLeave); + target.addEventListener('mousedown', this.__onTargetMouseDown); target.addEventListener('focusin', this.__onTargetFocusIn); target.addEventListener('focusout', this.__onTargetFocusOut); } @@ -563,6 +565,7 @@ class Popover extends PopoverPositionMixin( target.removeEventListener('click', this.__onTargetClick); target.removeEventListener('mouseenter', this.__onTargetMouseEnter); target.removeEventListener('mouseleave', this.__onTargetMouseLeave); + target.removeEventListener('mousedown', this.__onTargetMouseDown); target.removeEventListener('focusin', this.__onTargetFocusIn); target.removeEventListener('focusout', this.__onTargetFocusOut); } @@ -805,6 +808,17 @@ class Popover extends PopoverPositionMixin( this.__handleMouseLeave(); } + /** @private */ + __onTargetMouseDown() { + if (this._overlayElement.opened && !isLastOverlay(this._overlayElement)) { + return; + } + + if (this.__hasTrigger('hover') && !this.__hasTrigger('click')) { + this._openedStateController.close(true); + } + } + /** @private */ __onOverlayFocusIn() { this.__focusInside = true; diff --git a/packages/popover/test/trigger.test.js b/packages/popover/test/trigger.test.js index 9810106933..fba184aea3 100644 --- a/packages/popover/test/trigger.test.js +++ b/packages/popover/test/trigger.test.js @@ -149,6 +149,15 @@ describe('trigger', () => { expect(overlay.opened).to.be.true; }); + it('should close on target mousedown', async () => { + mouseenter(target); + await nextRender(); + + mousedown(target); + await nextUpdate(popover); + expect(overlay.opened).to.be.false; + }); + it('should not open on target mouseenter when detached', async () => { popover.remove(); mouseenter(target); @@ -417,6 +426,21 @@ describe('trigger', () => { }); }); + describe('hover and click', () => { + beforeEach(async () => { + popover.trigger = ['hover', 'click']; + await nextUpdate(popover); + }); + + it('should not close on target mousedown', async () => { + mouseenter(target); + await nextRender(); + mousedown(target); + await nextUpdate(popover); + expect(overlay.opened).to.be.true; + }); + }); + describe('focus and click', () => { beforeEach(async () => { popover.trigger = ['click', 'focus'];