How can i prevent opening the window on outside click?

I wanted to build custom autocomplete. I found this youtube tutorial

https://www.youtube.com/watch?v=9MN-pi2GMw4 The complete solution for this tutorial is here - (You don't need to watch whole 12 minutes video ) https://github.com/Bigless27/custom-autocomplete.

So he is using dropdown.directive.ts to detect when the user click outside to close the window under the input

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
    selector: '[clickOutside]',
})
export class ClickOutsideDirective {
    @Output() public clickOutside = new EventEmitter();
    constructor(private _elementRef: ElementRef) {

    }

    @HostListener('document:click', ['$event.target'])
    public onClick(targetElement) {
        const isClickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!isClickedInside) {
            this.clickOutside.emit(null);
        }
    }
}

but there is a bug.If the window is closed - and the user clicks outside then the window is opened. How can i solve this with this clickOutside directive here ?



Read more here: https://stackoverflow.com/questions/66998084/how-can-i-prevent-opening-the-window-on-outside-click

Content Attribution

This content was originally published by sdsd at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: