DropDownTreeComponent does not update value after edit

[Thomas]

Hi,

I use a DropDownTreeComponent with object binding to enable the user to set a property of a business object. The user can navigate through multiple business objects and the DownDownTree is updated according to the current business object.

Everything works fine, until the user updates a business object by selecting a value from tree. After the user interaction, the DropDownTreeComponent is no longer updated, when the user selects another business object - the [value] is updated but the component does not respond.

Is there a fix or a workaround?

Best regards,
Thomas

[Thomas]

I´ve found a workaround by try and error: In the handler for (valueChange) I have to call "reset()" for the DropDownTreeComponent. After that the component will react again, when [value] is changed.

[Yanmario]

Hi Thomas,

I'm glad that you found a way to fix the issue. Looking at the question, I am not sure how the DropDownTree is being edited as the component itself doesn't provide editing functionality. However, when updating the data for the component, the developer also needs to change the reference to the data collection to trigger Angulars change detection and update the component UI. I've managed to create an example demonstrating that:

https://stackblitz.com/edit/angular-sssofp?file=app/app.component.ts

When pressing the update button on the first DropDownTree, it would update the collection and change the reference to it in the following code:

 this.data.push({
      id: 55,
      text: 'Foo',
      items: [
        { id: 2, text: 'Tables & Chairs' },
        { id: 3, text: 'Sofas' },
        { id: 4, text: 'Occasional Furniture' },
      ],
    });
    this.data = [...this.data];

I also added a second DropDownTree that is missing the reference change to demonstrate that the component UI stays the same even tho the collection is being updated. If this isn't the case and the collection isn't being updated, if you have time, could you provide us with additional information like HTML and TypeScript code markup or, better yet a runnable example for us to troubleshoot. Thank you.