SelectValueObserver and CheckedObserver do not notify subscribers on change

[unreality]

SelectValueObserver and CheckedObserver do not notify all subscribers on change. I am unsure whether this is intended or not, but here is an example:

import {inject, customAttribute, ObserverLocator} from 'aurelia-framework';

@customAttribute('test')
@inject(Element, ObserverLocator)
export class TestCustomAttribute {
    constructor(element, observer_locator) {
        this.element = element;
        this.value_observer = observer_locator.getObserver(this.element, 'value');
    }

    attached() {
       this.value_observer.subscribe((newValue) => { console.log("new value is: " + newValue) ;} );
    }
}

In the following template

<template>
<select value.bind='testval' test>
 <option value='1'>One</option> 
 <option value='2'>Two</option>
 <option value='3'>Three</option>
</select>

<select value.bind='testval'>
 <option value='1'>One</option> 
 <option value='2'>Two</option>
 <option value='3'>Three</option>
</select>
</template>

If you change the value on the second select element, the first updates, but the subscription does not get notified. The same problem is seen with the CheckedObserver.

In tests, if you add a call to this.notify() in SelectValueObserver.setValue(), it will work, but like i said, i am unsure whether this is intended behavior or not. If it is working as intended, is there a correct way to get the update event instead of using the subscribers?

[jdanyow]

All of the observers for DOM elements detect changes by subscribing to DOM events, primarily the change and input events. The DOM fires these events automatically when a user modifies the input. The events do not fire when the input's value is changed programmatically. This means the element observer is unable to detect situations where the value is updated by the binding system, which is what you're seeing.

Here's a plunker that demonstrates that the observed value is accurate only when the element is updated by the user.

<template>
  <label>Select 1:
    <select ref="select1">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </label>
  Observed value: <strong>${select1.value}</strong>
  <br/>
  <label>Select 2:
    <select ref="select2" value.bind="select1.value"> <!-- select1 and select2 are bound together -->
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
  </label>
  Observed value: <strong>${select2.value}</strong>
</template>

Maybe we should update the observers to fire DOM events when updating the element. Let me run this by the team and get back to you.

[npelletm]

@jdanyow : I'm face of the same issue. Any news of this issue ?

[jdanyow]

I think we need to notify when setValue is called, as mentioned by @unreality. This will make the SelectValueObserver and CheckedObserver consistent with the ValueAttributeObserver: https://github.com/aurelia/binding/blob/master/src/element-observation.js#L103