Angular 6 how to correctly utilize focusout but prevent it's execution when clicking itself

Question

I have a demo of my issue on a stackblitz that you can try out : https://stackblitz.com/edit/angular-gitter-u7erfg?file=app%2Fapp.component.ts

My goal is to have a div who's click is caught to prevent focusout execution (I can't prevent focusout from firering but I can place an if within the method called by focusout and check my condition, whatever it is, in there).

Or, aternatively, is there another method that could accomplish similar, if better, results?

Answer 1

How about this: stackblitz

Basically it uses the mousedown to prevent the default focusout event. And when a file has been chosen, it closes the green square:

export class AppComponent  {
  opened = false;
  dostuff = false;

  toggle(){
    this.opened = !this.opened
    if(!this.opened) this.dostuff = false;
  }


  mouseInside(event){
    this.dostuff = true;
    event.preventDefault();
  }

  focusOut(){
    if (!this.dostuff) {
      this.opened = false;
    }
  }

  onFileChange(event) {
    this.opened = false;
    this.dostuff = false;
  }
}