Angular 7 - Material - Table column filters and column sorting - Edge

0
votes

I am trying to combine specific columns filtering and column sorting with material table. On chrome it works just fine but i cannot manage to make it work with Edge, which is my targeted browser...

On edge, I cannot access the column filter text field, it just sorts the column.

Here is a stackblitz matching my issue : https://stackblitz.com/edit/angular-hbakxo-9enmx4

Thanks in advance.

1
angularinternet-explorerangular-material
Is your Stackblitz example running in Edge? I try to run it in Edge but it shows 'Out of stack space' error. - Deepak-MSFT
It does with IE11 running as Edge debugger (I have no choice as we run on Windows 7 computers). - Gorgo
Not sure, how you are accessing it. Stackblitz example shows a blank page while opening with IE 11 browser. - Deepak-MSFT
Try with the app link instead of the one with the code included, it works on my side. angular-hbakxo-9enmx4.stackblitz.io - Gorgo
I tried to check it with IE and I can see that issue there. I check the code and I try to compare it with another example. I noticed that you did not use type="text" in this line. <input matInput class="form-field" [formControl]="nameFilter" placeholder="Name Filter" (click)="$event.stopPropagation()"> You can try to add it and test with it. - Deepak-MSFT

1 Answers

1
votes

I have found a workaround to my issue. Instead of using the tag mat-sort-header in the th, I used a dedicated span in the th.

<span mat-sort-header></span>

It just needs a bit of css to render in the correct position but it does the trick. Here is the edited stackblitz : https://stackblitz.com/edit/angular-hbakxo-9enmx4