I have a div tag which works as select box with multi select feature.

<div class="multiselect" id="multiFocus" *ngIf="editMode" (focusout)="disableSelect($event)">
    <div class="selectBox">
        <div class="multi-select-user">
            <div style="width:180px; display:inline-block">
                <ng-container *ngFor="let selectedBaseVal of selectedBaseLicences.icdata; let baseVal=index">
                    <div class="base-selection" (click)="canshowCheckBoxes = !canshowCheckBoxes" *ngIf="(selectedBaseVal.License !== 'Select Base License')&& selectedBaseVal.Checked">
                        <span style="padding:5px;">{{selectedBaseVal.License}}</span>
                        <span class="icon-close icon--small icn-float" (click)="selectedBaseVal.Checked = !selectedBaseVal.Checked"></span>
                    </div>
                    <div style="padding:6px;" *ngIf="selectedBaseVal.License === 'Select Base License'">
                                            Select Base License
                    </div>
                 </ng-container>
            </div>
            <div (click)="canshowCheckBoxes = !canshowCheckBoxes" class="icon-dropdown icn-float inline-display">
            </div>
        </div>
    </div>
    <div class="multi-select-list" *ngIf="canshowCheckBoxes">
        <div id="baseCheckboxes" style="display:block; width:200px; border:1px solid #dfdfdf; border-top:none">
            <ng-container *ngFor="let base of selectedBaseLicences.icdata">
                 <div>
                     <label class="checkbox">
                         <input type="checkbox" [checked]="base.Checked" name="checkbox1" (change)="base.Checked = !base.Checked">
                         <span class="checkbox__input"></span>
                         <span class="checkbox__label">{{base.License}}</span>
                     </label>
                 </div>
            </ng-container>
    </div>
</div>

It looks like this What I'm trying is, when I click outside the div it should get disabled, so I'm trying with focusout event and in disableSelect() method I'm just making a value false. But focusout event is not working. Does div doesn't support focusout? Or is there any other way to disable?

I have a div tag which works as select box with multi select feature.

<div class="multiselect" id="multiFocus" *ngIf="editMode" (focusout)="disableSelect($event)">
    <div class="selectBox">
        <div class="multi-select-user">
            <div style="width:180px; display:inline-block">
                <ng-container *ngFor="let selectedBaseVal of selectedBaseLicences.icdata; let baseVal=index">
                    <div class="base-selection" (click)="canshowCheckBoxes = !canshowCheckBoxes" *ngIf="(selectedBaseVal.License !== 'Select Base License')&& selectedBaseVal.Checked">
                        <span style="padding:5px;">{{selectedBaseVal.License}}</span>
                        <span class="icon-close icon--small icn-float" (click)="selectedBaseVal.Checked = !selectedBaseVal.Checked"></span>
                    </div>
                    <div style="padding:6px;" *ngIf="selectedBaseVal.License === 'Select Base License'">
                                            Select Base License
                    </div>
                 </ng-container>
            </div>
            <div (click)="canshowCheckBoxes = !canshowCheckBoxes" class="icon-dropdown icn-float inline-display">
            </div>
        </div>
    </div>
    <div class="multi-select-list" *ngIf="canshowCheckBoxes">
        <div id="baseCheckboxes" style="display:block; width:200px; border:1px solid #dfdfdf; border-top:none">
            <ng-container *ngFor="let base of selectedBaseLicences.icdata">
                 <div>
                     <label class="checkbox">
                         <input type="checkbox" [checked]="base.Checked" name="checkbox1" (change)="base.Checked = !base.Checked">
                         <span class="checkbox__input"></span>
                         <span class="checkbox__label">{{base.License}}</span>
                     </label>
                 </div>
            </ng-container>
    </div>
</div>

It looks like this What I'm trying is, when I click outside the div it should get disabled, so I'm trying with focusout event and in disableSelect() method I'm just making a value false. But focusout event is not working. Does div doesn't support focusout? Or is there any other way to disable?

• javascript
• angular

• 1 use (blur) instead of focusout – Akhil Aravind Commented Jul 9, 2018 at 11:44
• @AkhilAravind blur is not working – pupil Commented Jul 9, 2018 at 11:49
• Unless your div has a tabindex property, I don't think a div can be focused and therefore unfocused. You can always use mouse events instead. – Jonathan Hamel Commented Jul 9, 2018 at 12:51

3 Answers 3

For using blur you should add tabindex (ex: tabindex="3") attribute or contentEditable to div then it will support the blur event.

<<h1>Click in divs and outside of them</h1>

<div onblur="alert('blur!')" style="border:1px solid #ccc;     background-color: blue; color: white;">
  This div could not support blur!
</div>
<br/>
<br/>
<div tabindex="1" onblur="alert('blur!')" style="border:1px solid #ccc; background-color: red; color: white;">
  This div support blur!
</div>

For angular:

<div tabindex="1" (blur)="alert('blur!')" style="border:1px solid #ccc; background-color: red; color: white;">

The above example will work in angular.

Basic Button Disable on mouse out from div example:

Solution

HTML:

<div style="background:red"(mouseout)="focuslost()" (mouseover)="focus()"  >
    <button [disabled]="disableButton"> Out from Here</button>
Touch here to enable
</div>

TS:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validator } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  disableButton: boolean = false;

   myForm: FormGroup;

  constructor(private fb: FormBuilder){
  }

  focuslost(event){
    console.log(event);
    this.disableButton = true;
  }

  focus(){
    this.disableButton= false;
  }
}

In your first line of code focusout with blur. (blur)="disableSelect($event)"