Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable MatSort on space key pressed Angular Material

So I'm using angular material tables and decided to made a filter for each column. The inputs for this filters are located in the row header of each column. That works fine, but the thing is when I'm typing and pressed the space key, the table gets sorted. I want this behavior to stop, but if I used (keydown.space)="$event.preventDefault()" but the space isn't inserted in the input. Here is the code below of the table.

<table mat-table class="full-width-table" (matSortChange)="sortData($event)" [dataSource]="this.datasrcCollIndex" aria-label="Elements" matSort matSortActive="strName" matSortDirection="asc" matSortDisableClear>

        <!-- Name Column -->
        <ng-container matColumnDef="strName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <mat-form-field style="margin-top: 0px;">
                    <input matInput placeholder="Name" (keyup)="filteringByColumns()"  [(ngModel)]="strName" >
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let user">{{user.strName}}</td>
        </ng-container>

        <!-- Gender Column -->
        <ng-container matColumnDef="strGender">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                <mat-form-field style="margin-top: 0px; width: 70px;">
                    <input matInput placeholder="Gender" (keyup)="filteringByColumns()" [(ngModel)]="strGenderColumn">
                </mat-form-field>
            </th>
            <td mat-cell *matCellDef="let user">{{user.strGender}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.dictstrDisplayedColumns"></tr>
        <tr mat-row (click)="this.showDetailsOfUsers(user)"
            *matRowDef="let user; columns: this.dictstrDisplayedColumns;"></tr>

    </table>
like image 786
Angel Treviño Avatar asked Jul 18 '19 19:07

Angel Treviño


People also ask

How do I disable mat sort?

We can disable the sorting of a table in 2 ways: We can add property matSortDisabled on matSort directive, or. Add disabled attribute on any single table header.

What is matSortDisableClear?

matSortDisableClear: Whether to disable the user from clearing the sort by finishing the sort direction cycle. May be overriden by the MatSortable's disable clear input.


1 Answers

Instead of using

preventDefault()

I used

stopPropagation()

it still allows input to be entered, but does not propagate the event to the parent elements (thus the sorting element never receiving the event). Usage:

(keydown.space)="$event.stopPropagation()"
like image 87
ESipalis Avatar answered Oct 29 '22 17:10

ESipalis