Selected value in dropdown field is not updating

[zeejay09]

I have a problem, I have this dropdown and textfield. User can choose value from the dropdown and it will automatically fill up the textfield with value chosen from the dropdown. When user decides to manually type a value in the textfield, I listen to and append it to the dropdown's value array and automatically sets the selectedIndex of the dropdown to the newly appended value. Now the problem is, as the user types, the value at that index is changing constantly and is reflected automatically in the dropdown but not in the dropdown field. Illustration provided below.

When I type a, it is still okay:

But when I type the whole value, the dropdown value do not update:

But when I open the dropdown, the value of that particular selectedIndex is updated:

Any thoughts on how to do this or am I doing it wrong?

[PeterStaev]

Without seeing a code sample hard to say what might be wrong as no idea how you do the append/selection.

[zeejay09]

It is pretty basic actually, here is the code for the textfield:

onTextChanged(args: { text: string }) {
    // I set the currentIndex with the length of the array which is i.e. 10, which makes the last index 9.
    const currentIndex = this.dropdownArray.length;

    // I then assigned the texts to the 10th element, which is the new element I added to the array.
    this.dropdownArray[currentIndex] = args.text;

    // I then set the selectedIndex to the 10th element.
    this.selectedIndex = currentIndex
}

I simplified it like that but that is how I add value to the dropdown via the textfield. So while typing, only the currentIndex element is being updated, as shown above, while typing, it does appends the new value and update it every time the user types but the value of field in the dropdown is not being updated.

[PeterStaev]

You can't actually update the values like that since the simple arrays do not correctly notify when you change an internal item. Try assigning a new value to the property you have bound as the drop down source. The other way is to use an ObservableArray, remove the old element and add a new one.

[zeejay09]

Oh okay, I think I'll try ObservableArray. Thanks