Components: [Sort] Cannot add clickable icon inside of the sort header in IE

[zebzhao]

Bug, feature request, or proposal:

Adding a clickable icon is to a mat-sort-header is not possible in IE11. IE11 will not listen to click events inside of <button>. Changing to <div> might work.

What is the expected behavior?

Adding click events to header should work in IE11.

What is the current behavior?

Click events are completely ignored by IE11 browser.

What is the use-case or motivation for changing an existing behavior?

Adding additional clickable icons in the Table header.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.4
Material 2.0.0.beta.12
Typescript 2.4.2
IE11
Wandows

Is there anything else we should know?

[gangsthub]

Also happening in Firefox :(

Default <ng-content> inside button is limiting the user's possibilities:

https://github.com/angular/material2/blob/63f713f846a1b2c5a69c4342f0816085a341457f/src/lib/sort/sort-header.html#L4-L10

Current spec for buttons in HTML5's living standard says:

Content model:
Phrasing content, but there must be no interactive content descendant.

There could be a prop like interactuableContent in the mat-sort, that would make the content render inside a div instead of a button (being backwards compatible).

Thanks, guys.

EDIT: @ozsivanov has suggested a better approach that could work as a workaround later in this thread 👇

[sergeu90]

May you suggest something workaround ?

[ozsivanov]

As a workaround, you can move the mat-sort-header directive to an element inside of the mat-header-cell:

So if you have something like:

<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">
  <span>Column Title</span>
  <button>Click Me!</button>
</mat-header-cell>

Moving the directive into the span will work (with some minor styling tweaks):

<mat-header-cell *matHeaderCellDef>
  <span mat-sort-header arrowPosition="before">Column Title</span>
  <button>Click Me!</button>
</mat-header-cell>

[baumandm]

As a workaround, you can move the mat-sort-header directive to an element inside of the mat-header-cell

This doesn't appear to be a working workaround in Firefox.

[ozsivanov]

This doesn't appear to be a working workaround in Firefox.

Here's a stackblitz for the workaround: https://stackblitz.com/edit/angular-zvaykr.
The Works in FF column header works for me on Firefox 62.0.2. Like I mentioned before, there is some extra styling work needed to reposition the button, but otherwise it seems to work as expected.

[baumandm]

I can't see any difference between the two workarounds, but can confirm it's working now for me in Firefox. Not sure if something changed on my end or if I just messed it up last time I tested.

Thanks for taking the time to look into this!

[sergeu90]

@ozsivanov Thanks. This is a good solution.