Hierarchical (parent/child) select binding

[sousekd]

Hi,

I'd like to submit a bug report

• Library Version: tested on 1.0.3 (gist), 1.0.8 (our dev environment)

Please tell us about your environment:

• Operating System: Windows 10

• Browser: Chrome 56.0.2924.87

• Language: all

Current behavior:

We are having issues when trying to bind two selects (dropdowns) in a typical parent/child scenario, The child dropdown (which is bound to selected parent's children) is not rebound correctly after change of the parent when there is too few items. See this Gist demo to reproduce the issue. You can see there 2 exactly same bindings that differ in number of items only, and one binding with <template> workaround, which solves the issue only partially:

• Long hierarchy (working great):

  • select Parent item 1, then select Child item 1.1 => indicated selected child is 1.1
  • change Parent to item 2 => Child item in dropdown changes to none and indicated selected child is cleared
  • change Child to item 2.2, then change Parent to none => Child item in dropdown changes to none and indicated selected child is cleared

• Short hierarchy (not working):

  • select Parent item 1, then select Child item 1.1 => indicated selected child is 1.1
  • change Parent to item 2 => Child item in dropdown changes to 2.1 but indicated selected child remains at 1.1
  • change Child to item 2.2, then change Parent to none => Child item in dropdown changes to none and indicated selected child is cleared

• Short hierarchy (with template workaround):

  • select Parent item 1, then select Child item 1.1 => indicated selected child is 1.1
  • change Parent to item 2 => Child item in dropdown changes to none and indicated selected child is cleared
  • change Child to item 2.2, then change Parent to none => Child item in dropdown changes to none but indicated selected child remains at 2.2

As you can see, the change of selected Parent to both another item or null on the first pair causes the reset of selected Child item. On the second pair, the selected Child item is not reset when another Parent item is selected, but it is reset when null Parent is selected. On the third pair, the selected Child item is reset when another Parent item is selected, but it is not reset when null Parent is selected.

The point is that the first two dropdown pairs are 100% identical, only the amount of data differs. The correctly working (first) one operates on a larger hierarchy, the incorectly working (second) one operates on a smaller set. The third pair of dropdowns is our attempt to workaround the issue by enclosing the child dropdown within <template with="selectedParent"> tag.

Expected/desired behavior:

• What is the expected behavior? Most importantly, we would expect all three pairs to work consistently, not being affected by the size of an array they bound to. I think the first pair in the Gist demo works best.

• What is the motivation / use case for changing the behavior? In our applications, we have many dropdowns bound to lists of items which change during screen lifecycle, and it causes us problems when dropdowns go out-of-sync and we have different data in viewmodels and different on a screen.

Thank you very much for looking at this. We love Aurelia and this is one of very few issues we've faced in almost one year of otherwise fantastic experience.

Best Regards, David

[sousekd]

Hi,

We are still struggling with the issue. I believe that having a set of dropdowns for editing hierarchical data on a form has to be quite a common scenario - so maybe we are just doing something completely wrong... Until this is fixed, does anybody know about some elegant workaround?

Thanks again, David

[EisenbergEffect]

@jdanyow Can you provide some insight?

[sousekd]

Ok, the workaround is actually pretty straightforward:

• In parent select: change.delegate="onParentChange()"
• In viewmodel: onParentChange() { this.selectedChild = null; }

But I still think this should be unnecessary...

[jdanyow]

similar to https://github.com/aurelia/binding/issues/521 has to do with the value the child select is bound to changing prior to the child select's options being updated by the repeat. We may need to put a mutation observer on the select to ensure we can synchronize the selected value after the options change.

[Alexander-Taran]

Indeed it's similar to https://github.com/aurelia/binding/issues/521

one could be closed

[EisenbergEffect]

Closing as duplicate.

[bigopon]

@sousekd fix for this is at https://github.com/aurelia/binding/pull/677