mat-tab-label disable keyboard interaction - html

Question

I have a material tab component (mat-tab-gruop), and i needed a search bar inside the mat-tab-header, so i added a disabled tab containing only a mat-tab-label, and placed it inside it my search bar component.
Like this:
<mat-tab-group>
<mat-tab disabled>
<ng-template mat-tab-label>
<search-bar></search-bar>
</ng-template>
</mat-tab>
</mat-tab-group>
My problem is when I press an arrow key, instead of moving the cursor between characters, the focus changes to the other headers.
That happened because angular-meterial use Keyboard interaction to move focus between tabs.
I want to disable this Keyboard interactions behaviour, and keep focus on my search bar. I know I can move back focus after losing it to another tab header, then back to the search tab-header, using binding to (selectedTabChanged) and move focus back. I want the focus to always stay on the search bar input, so I’ll be able use arrows to move between charcters.
stackbiltz Example
my code:
<mat-tab-group [selectedIndex]="'1'">
<mat-tab disabled>
<ng-template mat-tab-label>
<div>
<mat-form-field>
<input matInput class="search" [value]="searchText">
</mat-form-field>
</div>
</ng-template>
</mat-tab>
<mat-tab label="tab1">
<p>some content</p>
</mat-tab>
<mat-tab label="tab2">
<p>some content</p>
</mat-tab>
</mat-tab-group>

Answer 1

Stop the key events propagating from the input field to stop them reaching the tab widget
<mat-form-field>
<input matInput class="search" [value]="searchText" (keydown)="suppressKeyEvent($event)">
</mat-form-field>
and
export class TabGroupAnimationsExample {
suppressKeyEvent (event:any) {
event.stopPropagation();
}
}
https://stackblitz.com/edit/angular-xufnk7-keqvdt
Just picking up angular and had to do something similar to above, so if anyone knows of a more 'angurly' way to do it (i.e. can you write the key suppression as some kind of imported module/directive?) that'd be kewl.