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

Help Requests
1

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

select-test.ts

import { autoinject } from “aurelia-framework”;

@autoinject()
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? : )

test
test.PNG848×388 57.1 KB

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
2

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 = '';
  }
}
3

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
4

Thanks for your more preety solution.

5

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.

6

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)

7

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?

8

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.synchronizeOptions();
    this.synchronizeValue();
  });
  this.domObserver.observe(this.element, { childList: true, subtree: true, characterData: true });
}
9

Okay, that’s great! : )