IE11 - repeat.for with sort value converter not updating component after sort direction changes.

[Ra-Sedgwick]

I'm submitting a bug report

• Library Version:
  2.0.0

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  8.11.3

• NPM Version:
  6.1.0

• JSPM OR Webpack AND Version
  Gulp 4

• Browser:
  IE 11

• Language:
  TS v2.1.6

Current behavior:
repeat.for with sort value converter failing is to update component when a size attribute is present on the select element.

I have a select list sorted by a value converter and two buttons to toggle the sort direction. In IE 11 the select list does not update even though the value converter is being called an my list object is updated.

The root cause appears to be using the size attribute on the select element

This is working in all other browsers.

Expected/desired behavior:

Skeleton App Demo

• What is the expected behavior?
  The select lists sort direction changes when either button is pressed.

• What is the motivation / use case for changing the behavior?
  Cross browser compatibility.

[3cp]

I think you mean v1.3.0 for aurelia-framework. The current version for aurelia-binding is v2.1.3.

[Ra-Sedgwick]

You are correct, I've updated with my aurelia-binding version.

[Ra-Sedgwick]

I've determined the root cause.

Using the size attribute on a select element seems to be preventing the list from updating.
As gist.run is not working in IE 11 I've updated a skeleton app to recreate the issue.

Skeleton Demo Project

[fkleuver]

I was able to reproduce this on IE11.
Here's the crazy part (or maybe not-so-crazy; we're talking about IE, after all..)

You can see the DOM update when you inspect it (note that Zulu is on top):

But the visual update does not occur (note that Zulu is still at the bottom):

Even hand-editing the DOM will not cause the updates to render. Somehow this very specific set of conditions just causes the select element to stop re-rendering.

Google revealed a handful of dropdown quirks in IE but nothing that explains this. I'm baffled by it (but also not, because it's IE..)
@bigopon any ideas?

[bigopon]

Wow, that's ... crazy when hand editing the DOM doesn't cause IE to re-render. I'm not even sure if this is Aurelia related.

[bigopon]

Changing the size attribute to 1 and revert it back to 3 will make IE rerender the select. So the workaround is

export class App {
  public readonly myBrokenSelect: HTMLSelectElement;
  public router: Router;

  public userList = [
    new User('Zulu', 0),
    new User('Lima', 1),
    new User('Bravo', 1)
  ];

  @observable() // make it observable so we can trigger the rerender
  public sortDirection = 'ascending';

  ...
  
  // This just to trigger the render
  sortDirectionChanged() {
    if (this.myBrokenSelect) {
      const currSize = this.myBrokenSelect.size;
      this.myBrokenSelect.size = 1;
      this.myBrokenSelect.size = currSize;
    }
  }
}

@Ra-Sedgwick nice bug that you discovered there. @fkleuver you are right about it not being so crazy 😄

[fkleuver]

@bigopon Interesting that that works..
@Ra-Sedgwick Is this an acceptable workaround for you?

[Ra-Sedgwick]

Thanks for the workaround @bigopon its cleaner then what I came up with.

In my app I'm applying a filter via a value converter as well and this workaround still has issues if the list has been filtered.

The first time the sort direction is toggle (with a filter applied) the select box still fails to update, however any subsequent toggles work.

Introducing a slight delay has everything working as expected.

       if (this.selectBox) {
            setTimeout(() => {
                const currSize = this.selectBox.size;
                this.selectBox.size = 1;
                this.selectBox.size = currSize;
            });
        }

[fkleuver]

@EisenbergEffect I don't think this is something we can / want to fix since it's a very quirky IE11 thing. But we may want to keep this open as a todo to document this somewhere, or simply to make this easier to find for other people with the same issue. What do you think?

[EisenbergEffect]

Definitely would be good to document this.

[Alexander-Taran]

IE is Cobol of the future