Focusout is trigger after click on child element text box in agular

When I click on nested element of div then focus out element is triggering. Focus out trigger should not trigger while click on inner input element. What I missing here?

      <div class="form-group col-md-12 " > 
        <label>Labels</label><br />
        <div tabindex="0" style=" border: 1px solid #ced4da; border-radius: 0.25rem; width: 100%; margin-left: 0px; padding: 3px;min-height:55px;" class="row" (click)="enterTagArea()" (focusout)="moveoutFromTagArea()" >
          <span *ngFor="let tag of tags" class='tag'>{{tag}} <span class='close' (click)="removeTag(tag)"><b>&times;</b></span></span>

          <div class="autocomplete" style="width:300px;float:left;">
            
            <mat-form-field>
              <input type="text" placeholder="Label" matInput [formControl]="myControl" [matAutocomplete]="auto" (keypress)="(( ($event.keyCode>= 65 && $event.keyCode<= 90) ||($event.keyCode>= 97 && $event.keyCode<= 122)||($event.keyCode>= 48 && $event.keyCode<= 57)|| $event.keyCode==95|| $event.keyCode==45) ? true:false)" (keyup.enter)="onEnterAddTag()" class="form-controlForTag" maxlength="15" style="width: 152px">
              <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)='onEnterAddTag()' style="width: 100%">
                <mat-option *ngFor="let option of filteredOptions | async" [value]="option" style="width: 150%">
                  {{option}}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
          </div>
        </div>

      </div>