bug(table) stickyness of header-cell is ignored in sticky header-row when on Edge using flex-style table

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Sticky columns in a sticky row should behave as both stickyness rules applies

What is the current behavior?

Once the header is set as sticky, the header-cells behave as they don’t have position: sticky. Happens only with flex-style table, runs fine with native table (except all the others horrible GUI problems with it). Happens only on Edge, runs fine on Chrome and Firefox.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-1jas2g

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

It’s broken

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

Angular 6.1.1 Angular Material 6.4.7 Edge: 17.17134 Windows 10 Typescript 2.9.x

Is there anything else we should know?

Hi ❤️

[IlCallo]

My explorations continues. We need these informations in one place to make the fix consistent:

1. list of sticky rows
2. rows native elements references
3. list of sticky columns inside every row
4. type of the table (flex or native)
5. browser in use (to target only Edge)

Edge can be detected from pretty much everywhere using feature detection so that’s not a problem.

I studied a bit the CDK table code and I’m not sure which would be the best place to put the fix, but I have a couple of ideas:

• stickRows in sticky-styler: it has access to all rows native elements and knows which ones must be sticky (1, 2). It has an internal property to keep track if the type of table (4). Only problem, it cannot check in an easy and fast way if a row have inside at least one sticky column (not 3);
• updateStickyColumns in sticky-styler: it has access to all rows native elements (2), it can access the table type (4) and has information about which columns are sticky (3). We don’t have here information about the stickyness of the rows (not 1);

We probably should keep the fix code inside sticky-styler, but we never have all the info we need. The last method which knows all the info we need is _addStickyColumnStyles in table.ts. The problem here is that it defines the rowDef parameter as of type BaseRowDef, because it takes as assumption that stickyness isn’t needed anymore, instead of keeping CdkHeaderRowDef and CdkFooterRowDef definitions which extends the base class keeping into account the stickiness.

A possible solution would be to add a isSticky parameter at the end of the updateStickyColumns method call which defaults to false, then change _addStickyColumnStyles second parameter type to an union type with all row types (CdkHeaderRowDef | CdkFooterRowDef | CdkRowDef) and pass in the sticky property (with a not-null assertion).

/** Adds the sticky column styles for the rows according to the columns' stick states. */
  private _addStickyColumnStyles(rows: HTMLElement[], rowDef: CdkHeaderRowDef | CdkFooterRowDef | CdkRowDef) {
    const columnDefs = Array.from(rowDef.columns || []).map(c => this._columnDefsByName.get(c)!);
    const stickyStartStates = columnDefs.map(columnDef => columnDef.sticky);
    const stickyEndStates = columnDefs.map(columnDef => columnDef.stickyEnd);
    this._stickyStyler.updateStickyColumns(rows, stickyStartStates, stickyEndStates, rowDef.sticky!);
  }

  updateStickyColumns(
      rows: HTMLElement[], stickyStartStates: boolean[], stickyEndStates: boolean[], isSticky = false) {
   // [...]
  }

In this way, when the sticky property is not present we’ll get an undefined which will default to false while, when it’s present, the actual value will be passed on allowing us to get the stickyness of a row inside updateStickyColumns.

This is possible because header and footer rows are passed one by one to the _addStickyColumnStyles method, if this changes the fix will break and a comment (and an automatic test) must be put in place to prevent random code failule.

All this changes will be documented with instruction to rollback when nested sticky elements problem is solved by Edge team.

Tomorrow I’ll try to define the code to actually put in place the fix inside sticky-styler class.

@andrewseguin what do you think about this? It’s not perfect but it may just work as a temporary patch

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}