diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index f2f7e7f..a21ae99 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -97,6 +97,7 @@ export class HeaderComponent { this.navSliderStatus = false; this.userSliderStatus = false; + this.profileDropdownState = false; } private createSignupPopup() { @@ -119,6 +120,7 @@ export class HeaderComponent { this.navSliderStatus = false; this.userSliderStatus = false; + this.profileDropdownState = false; } private closeLoginPopup() { diff --git a/src/app/shared/directive/clicked-outside/clicked-outside.directive.ts b/src/app/shared/directive/clicked-outside/clicked-outside.directive.ts index 49fec5e..e75d59c 100644 --- a/src/app/shared/directive/clicked-outside/clicked-outside.directive.ts +++ b/src/app/shared/directive/clicked-outside/clicked-outside.directive.ts @@ -1,6 +1,6 @@ import { DOCUMENT } from '@angular/common'; import { AfterViewInit, Directive, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, ViewChild } from '@angular/core'; -import { filter, fromEvent, Subscription } from 'rxjs'; +import { combineLatest, combineLatestWith, filter, fromEvent, merge, Subscription } from 'rxjs'; @Directive({ selector: '[appClickedOutside]' @@ -8,18 +8,18 @@ import { filter, fromEvent, Subscription } from 'rxjs'; export class ClickedOutsideDirective implements AfterViewInit, OnDestroy { @Input() - ignoreElementList!: HTMLDivElement[]; + ignoreElementList!: HTMLDivElement[]; @Input() - includeClickedOutside!: HTMLDivElement[]; + includeClickedOutside!: HTMLDivElement[]; @Input() - clickOutsideStopWatching: boolean = false; + clickOutsideStopWatching: boolean = false; @Output() - clickOutside: EventEmitter = new EventEmitter(); + clickOutside: EventEmitter = new EventEmitter(); - clickListener!: Subscription; + eventListener!: Subscription; constructor( private element: ElementRef, @@ -28,20 +28,25 @@ export class ClickedOutsideDirective implements AfterViewInit, OnDestroy { ngAfterViewInit(): void { - + const mouseDownListener$ = fromEvent(document, 'mousedown'); + const mouseUpListener$ = fromEvent(document,'mouseup'); - this.clickListener = fromEvent(this.document, 'click') - .pipe( - filter((event) => { - return !this.isInside(event.target as HTMLElement) || this.includedList(event.target as HTMLElement); - }) - ). subscribe( () => { - !this.clickOutsideStopWatching && this.clickOutside.emit(); - }); + this.eventListener = mouseUpListener$.pipe( + combineLatestWith(mouseDownListener$), + filter(([downClick, upClick]) => { + return (downClick.target as HTMLElement) + .contains(this.element.nativeElement) && (!this.isInside( + upClick.target as HTMLElement + ) || this.includedList(upClick.target as HTMLElement)); + }) + ). subscribe( () => { + !this.clickOutsideStopWatching && this.clickOutside.emit(); + }); + } ngOnDestroy(): void { - this.clickListener?.unsubscribe(); + this.eventListener?.unsubscribe(); } private isInside(elementToCheck: HTMLElement): boolean {