md-select: initial selected value is not selected

[tdamir]

This works well on Chrome but on FF, Edge and IE11 the selected option is not selected. If I display the hidden select element, the option is selected.

<select md-select="label: Label" value.two-way="model.value">
    <option repeat.for="item of model.items" model.bind="item.id">${item.name}</option>
</select>

If I bind to selected attribute then the selected option will be selected on the first render on all browsers:

<select md-select="label: Label" value.two-way="model.selectedValue">
    <option repeat.for="item of model.items" model.bind="item.id" selected.bind="item.id == model.selectedValue">${item.name}</option>
</select>

[Thanood]

@tdamir I'm not sure if I got this right. What does this mean:

If I display the hidden select element

What's the hidden select element? 😃
Would you mind creating a gist with a reproduction of this issue? It's easier for me to see what's wrong.
Here's a base: https://gist.run/?id=e8eed34e8bba17f5213535bcdd004a9e

Does this work with a native select?

[Thanood]

Oh, now I understand what you mean with the hidden select. It's the native element which is wrapped by Materialize, right?

[Thanood]

This works:

https://gist.run/?id=598658b48d36328f52bd406c986ff6a6

view:

<template>
  <select md-select="label: Label" value.two-way="model.value">
    <option repeat.for="item of model.items" model.bind="item">${item.name}</option>
  </select>
  <div>
    selected: ${model.value.id}
  </div>
</template>

view model:

export class App {
  items = [
    { id: 0, name: 'Option A' },
    { id: 1, name: 'Option B' },
    { id: 2, name: 'Option C' },
    { id: 3, name: 'Option D' }
  ];
  model = {
    items: this.items,
    value: this.items[1]
  };
}

[Thanood]

According to this hub entry, model.bind should be an object, not an object's property:
http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-selects/3

There's another description which describes how to use a matcher function. You could use the id there if you really need to match by id.

[tdamir]

I apologize for the confusion. Correct, I was referring to the native element by hidden select. The following is working as expected on native elements in all browsers. If you run this on Chrome the wrapper will also select the option but on Edge, IE and FF only native element is selecting correctly the option (according to the DOM inspector).

<template>
  <select md-select="label: Label" value.two-way="model.selectedValue">
    <option repeat.for="item of model.items" model.bind="item.someId">${item.name}</option>
  </select>
  <div>
    selected: ${model.selectedValue}
  </div>
</template>

export class App {
  items = [
    { someId: 0, name: 'Option A' },
    { someId: 1, name: 'Option B' },
    { someId: 2, name: 'Option C' },
    { someId: 3, name: 'Option D' }
  ];
  model = {
    items: this.items,
    selectedValue: 2
  };
}

[tdamir]

According to the doc the sample should work because we are working with numbers:
http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-selects/2

[Thanood]

I've copied your code into a gist and called it in Firefox 49:
https://gist.run/?id=2a45ef96c356828b51684937baa8fe8d

It seems to work there. The gist displays "selected: 2" and "Option C" is selected when I run it.
When I change the selected element, it updates the selected id.
Is that the expected behaviour?

I don't have access to Edge here and IE11 won't run gist.run. I'll try this in Edge when I get home.

And of course you're right with binding to numbers. I've overlooked that, sorry. 😃

[tdamir]

I tried your code on FF (49) and it works. My colleague said that on FF sometimes it works and sometimes not. He is not sure about FF version. He will try the sample at home. On Edge it is not working for sure because I tried it.

[Thanood]

On Edge it is not working for sure because I tried it.

That would be great, indeed. That way I may actually be able to find a reason for that. 😉
Will try it again on FF, too. Maybe I'm lucky and it doesn't work.

Did I get this right that this is only an issue when binding to a number? So our "food" example in the catalog app will work? I'd like to know because I think in that case we should add an example which binds to an index.

[tdamir]

I tried the food sample and option in the native element is selected (if initially set) but wrapper is not showing it on IE11 and Edge. As for the FF we figured out that it didn't worked because id was a number and selectedValue was a string (in our project) and in that case aurelia cannot match the element (probably they are using === for equality). So it looks like there are only issues with IE and Edge,

[Thanood]

Okay, thanks for the additional info! 😃

[Thanood]

Confirmed.. This is the starting status of a changed food sample in Edge (changed to have the second item selected):

In Chrome, "Cake" is selected.

[Thanood]

The difference between Chrome and Edge is: at the time the component is created, Chrome has this.element.selectedIndex set to "2", which is correct (the sample's view model set this).

The value of this.element.selectedIndex in Edge is, at this point, still "1" although the view model class is initialized before this happens. So this should really be "2" instead.

I couldn't really track this down further but I guess the selectedIndex is set to "2" after that, without firing a change event - in which case the Materialize select would have been updated.

I'm not sure how to approach this now but I'll try further. 😃

[Thanood]

Seems to be fixed when wrapping the initialization in a taskQueue.queueTask().

[Thanood]

Released in 0.17.1.

[Thanood]

@tdamir About Firefox: I guess the reason why it sometimes works and sometimes doesn't is there's something running asynchronously. That should be gone with this change since the taskQueue runs at specific points in time after microtasks are finished.

Please try it with this change in Firefox. If it still happens, we can reopen this issue.
I also updated the bundles and here is a gist using 0.17.1:
https://gist.run/?id=850a28d00a6f45845046208ebd6d1001

[tdamir]

@Thanood I think the Firefox issue was because of our code but I'll let you know if the issue persist.
Thanks for the fix!