Default selected options are empty

[VMBindraban]

I'm submitting a bug report

• Library Version:
  1.0.0

Please tell us about your environment:

• Operating System:
  Linux Ubuntu 16.04
• Node Version:
  4.4.4
• NPM Version:
  2.15.1
• JSPM OR Webpack AND Version
  JSPM 0.16.36
• Browser:
  Chrome 51
• Language:
  all

Current behavior:
When using a translation on the first option, no fields are default selected.

Expected/desired behavior:

Gist.run is down.

<template>
  <select class="form-control" value.bind="value" multiple.bind="multiple">
    <option t="- Select a value -" value="0">- Select a value -</option>
    <option model.bind="option.id" repeat.for="option of options">${option[property]}</option>
  </select>
</template>

Value contains an array with the selected items.
When using translation (see above), the value becomes null between the bind and attached cycle. When removing t="- Select a value -", it works.

• What is the expected behavior?
  Given values should be selected.
• What is the motivation / use case for changing the behavior?
  It doesn't work correctly.

[zewa666]

Gist.run is up and running again, please provide an example.

[VMBindraban]

https://gist.run/embed.html?id=761ac31e78d1110224f0e61e32db3e27

I couldn't import the i18n libary however. Without that the bug will not appear.

[zewa666]

I've replicated it locally and both values are selected in both examples. So it seams something else is causing the issue maybe? One thing I noticed is your translation key Select something. Is that really the key, containing a blank space? Btw. I've tried it with the recent release

[VMBindraban]

I will look further then. I never had issues with keys containing spaces.

[VMBindraban]

It seems that when i add [html] to the t parameter, it works.

I can't find any leads that it's on my side besides that in valueChanged() the value gets changed into an empty array with a ModifyArrayObserver. Is it possible to trace the observer?

I can't make a working demo but i am sure that i18n is causing this.

[zewa666]

ok so can you create a zip file containing the CLI src folder, aurelia.json and locales and upload it somewhere, so that I can reproduce it?

[doktordirk]

@VMBindraban if you wanna use cli, you can use the swan-client-sample aurelia-cli branch

[VMBindraban]

I managed to isolate the issue in git.run. You need to import aurelia-i18n (again).

https://gist.run/embed.html?id=761ac31e78d1110224f0e61e32db3e27

When you look in the console i am logging the value in valueChanged().
The first change is to id 10 (which is good), the 2e change is into Foo. (which is the translated key, not good).

What i assume that happens, when i18n is changing the value, the select sees that as a change and sets the value to the translated option. Is this a possible binding issue?

[zewa666]

Ok so after our conversation in gitter @VMBindraban I think we've traced the bug a little bit further.

If we console log the valueChanged with new/old value we get 3 calls:

null -> 10
10 -> foo
foo -> translation

call 1 is the default setting it from empty to the id.
call 2 is caused by this line https://github.com/aurelia/i18n/blob/master/src/i18n.js#L159
call 3 because of whatever.

@jdanyow do you have an idea why the promised call to updateValue, caused from the TCustomAttribute interfers with the Changed hook in the component?
But even after switching there to sync, why is the 3rd call existing?

[RWOverdijk]

👍 Support + watching thread.

[VMBindraban]

Bump. Any progress on this?

[jdanyow]

I'll take a look

[VMBindraban]

@jdanyow Any news on this?

[VMBindraban]

@zewa666 Bump, any progress? It's kinda delaying our project.

[zewa666]

Sorry about the delay, @jdanyow is pretty busy with getting things done for the Validation Plugin and referenced work in other framework parts. In the meantime can you @VMBindraban tell me whether changing the promised return to a straight forward one inside the updateValue method fixes your issue?

updateValue(node, value, params) {
    if (params) {
      this.params[value] = params;
    } else if (this.params[value]) {
      params = this.params[value];
    }

    //return this.i18nextDefered.promise.then(() => this._updateValue(node, value, params));
    return this._updateValue(node, value, params);
  }

the easiest way to test it out is if you're using Aurelia CLI, to open up the app-bundle.js and search for the transpiled version

I18N.prototype.updateValue = function updateValue(node, value, params) {

in there just fix the above mentioned line.

---

It feels like this deferred call is already responsible for multiple issues, so by having your positive answer to that I guess I'll simply go ahead and publish a fix release. We can determine the root cause for this later, without blocking you guys any further.

[jdanyow]

@VMBindraban I took a look at the gist- couple question for you:

1. In association-select.html, there's a repeat.for="option of options"... where is options defined: https://gist.github.com/VMBindraban/761ac31e78d1110224f0e61e32db3e27#file-association-select-html-L4
2. In association-select.html, there's an option with no model. Shouldn't this element have model.bind="null" or model.bind="0": https://gist.github.com/VMBindraban/761ac31e78d1110224f0e61e32db3e27#file-association-select-html-L3

[zewa666]

@jdanyow @VMBindraban ok I think I have now a better understanding of this Promise thingy ... it was introduced with a previous enhancement which turned out to introduce a lot of regressions. There is a new PR pending. As for this issue if @VMBindraban you could just verify that the change I proposed previously I can merge the PR right away and get 4 bugs done straight in a row :)

[VMBindraban]

@zewa666 That didn't work.
params is always undefined, value is - Select a value -

@jdanyow I only kept de bare minimal to duplicate the issue:
The actual code can be found here:
https://github.com/SpoonX/aurelia-orm/blob/master/src/component/association-select.html
https://github.com/SpoonX/aurelia-orm/blob/master/src/component/association-select.js

options is an array containing objects. An object contains the following:

{
  id:1,
  name: "foo"
  createdAt:"2016-10-07T12:57:44.000Z",
  updatedAt:"2016-10-07T13:11:50.000Z"
}

I tried both model.bind="null" and model.bind="0" with no success.

[zewa666]

I've merged the PR anyway since its part of this bug as well. It definitely won't harm, but we need to closer look at the current issue. @jdanyow any new insights?

[VMBindraban]

The PR did not resolve the problem. For now we are going to use t="[html]string" as temporary fix.