How to put mat-chips inside a textarea

Question

I’m using the Material Chips Angular together with a textarea. I would like to place my Chips list inside my textarea.

Currently works as follows:

I wish I had something like:

My current code name:

   <div class="col-xl-3">
      <textarea class="form-control"
         #inputContasB2W
         (keyup.enter)="adicionaConta()"
         [formControl]="contasB2WControl"
         [matAutocomplete]="auto">
      </textarea>

      <mat-autocomplete autoActiveFirstOption="true" #auto="matAutocomplete">
         <mat-option (click)="adicionaConta()" *ngFor="let contaB2W of 
         contasFiltradas | async" [value]="contaB2W">
            {{contaB2W}}
         </mat-option>
      </mat-autocomplete>

   </div>

   <div class="col-xl-2">
       <mat-chip-list>
            <mat-chip *ngFor="let contaB2W of contasAdicionadasB2W; let j = index"
            selectable="false"
            removable="true"
            (removed)="removeTag(j)">
            {{contaB2W}}
            <mat-icon matChipRemove><i class="fa fa-close"></i></mat-icon>
            </mat-chip>
       </mat-chip-list>
   </div>

Answer 1

Try putting a event.stopPropagation(); in your Function adicionaConta($event)