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

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?

[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>

[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 👇