CODEWITHSUNDEEP
angularangular-material2
zer0
zer0

Reputation: 5017

Inputs in Angular Material 2 tab labels doesn't allow spaces

I have an input in the tab label and noticed that it doesn't allow spaces. I tried the event.stopPropagation(); but it didn't work. Is there a workaround?

HTML:

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      Tab Label: 
      <input type="text" (input)="handleInput($event)">
    </ng-template>
    <h1>Tab</h1>
    <p>Try entering a space in the input above</p>
  </mat-tab>
</mat-tab-group>

TS:

handleInput(event: KeyboardEvent): void{
    event.stopPropagation();
  }

Stackblitz: https://stackblitz.com/edit/angular-dwbjva

Upvotes: 3

Views: 878

Answers (2)

William Aguera
William Aguera

Reputation: 333

I just changed your stackblitz. You are using as the wrong way. Try to do this.

<mat-tab-group>
  <mat-tab label="Tab 1">
      <input type="text" (keyup)="handleInput($event)">
  </mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

Upvotes: -1

G. Tranter
G. Tranter

Reputation: 17958

Use (keydown) instead of (input).

Upvotes: 2

Related Questions