[Fixed] Select Binding--Two linked Selects work buggy under special scenario

I have two selects, and second one is affected by first one. Please see below code.


import { autoinject } from “aurelia-framework”;

export class SelectTest {
private output = [
{ “class”: “SNY”, “student”: [“Tom”, “Bob”, “Peng”] },
{ “class”: “TXC”, “student”: [“King”] },
{ “class”: “YUP”, “student”: [“Ken”, “Knight”, “Pat”] },
{ “class”: “ANV”, “student”: [“Pappy”] }
private school = [];
private selectedClass = {};
private selectedStudent = ‘’;
private myclass = ‘YUP’;
private mystudent = ‘Pat’;

constructor() {        
    this.school = this.output;
   // To set default values.
    this.selectedClass = this.school.find(x => x.class === this.myclass);
    this.selectedStudent = this.mystudent;


select-test.html – pleae see below image( I don’t know how to early paste html here.).

And there is a issue if you try below steps, please see below image.
step1: select class “TXC”;
step2: select class “ANV”;
It seems that switching between two lists whose length is 1 causes the issue, and I have no clue.
Is there anything related to data-binding system? Anyone knows why? : )

There is a workaround, which add a change.delegate=“triggerChange()” to first select and manully update the value of second select by triggerChange().

1 Like

You can try to set a default student whenever selected class changes.

@observable private selectedClass = {};

selectedClassChanged(newClass) {
  if (newClass && newClass.student && newClass.student.length) {
    this.selectedStudent = newClass.student[0];
    // you can also retain current selectedStudent value
    // if the newClass includes current selectedStudent.
  } else {
    this.selectedStudent = '';

Fix PR https://github.com/aurelia/binding/pull/677

Would be nice if you could check to see if it fixes this bug.

1 Like

Thanks for your more preety solution.

I add ‘characterData: true’ to line 148 in node_modules/aurelia-binding/src/select-value-observer.js. And run again, and the issue is still there. Please check it out. The key point is that there are two selects whose child select only has one item.

The src folder is for development, so you need to add it to either node_modules/aurelia-binding/dist/amd (requirejs / systemjs) or node_modules/aurelia-binding/dist/commonjs node_modules/aurelia-binding/dist/native-modules (webpack)

Sorry, I am a newbie here and know not much about the aurelia framework structure.
I tried again and the issue is fixed. Thank you very much.
One more question, could I use this fix in production, or I use workaround instead right now?

Yould could do the following in your main.js while waiting for the PR

import { SelectValueObserver, DOM } from 'aurelia-framework';

SelectValueObserver.prototype.bind = function() {
  this.domObserver = DOM.createMutationObserver(() => {
  this.domObserver.observe(this.element, { childList: true, subtree: true, characterData: true });

Okay, that’s great! : )