ComboBox selects the wrong item after it is collapsed

[bjorn-malmo]

Describe the bug

When inserting an item into an ObservableCollection that is bound to a ComboBox, which in turn Is Editable, the control selects the wrong index when the control is collapsed due du a click outside the control.

It works if the control is not editable, if an item is added after the selected index, if the control is collapsed by clicking the up chevron.

A variant of this issue is to use an ordinary list as a binding source

Steps to reproduce the bug

Create a project, add the following code to the MainWindow:

<Window
    x:Class="App1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:local="using:App1"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:media="using:CommunityToolkit.WinUI.UI.Media">

    <StackPanel Spacing="8">
        
        <ComboBox x:Name="CB" 
                  ItemsSource="{x:Bind Customers, Mode=OneWay}"
                  DisplayMemberPath="Name"
                  SelectedValuePath="Id"
                  SelectedValue="{x:Bind SelectedCustomer, Mode=TwoWay}"
                  IsEditable="True"/>

        <Button Content="Add customer" Click="Add_Click"/>
        <Button Content="Insert customer" Click="Insert_Click"/>
    </StackPanel>

</Window>

and for the code behind:

using Microsoft.UI.Xaml;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;

namespace App1;

public record Customer
{
    public Customer(int id, string name)
    {
        Id = id;
        Name = name;
    }

    public int Id { get; }
    public string Name { get; }
}

public sealed partial class MainWindow : Window, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    public MainWindow()
    {
        this.InitializeComponent();

        AddCustomer();
        AddCustomer();
        AddCustomer();

        SelectedCustomer = 2;
    }

    public ObservableCollection<Customer> Customers { get; } = new();

    List<Customer> _customersArray = new();
    public List<Customer> CustomersArray
    {
        get => _customersArray;
        set
        {
            if (_customersArray != value)
            {
                _customersArray = value;
                PropertyChanged?.Invoke(this, new(nameof(CustomersArray)));
            }
        }
    }

    int? _selectedCustomer;
    public int? SelectedCustomer
    {
        get => _selectedCustomer;
        set
        {
            if (_selectedCustomer != value)
            {
                _selectedCustomer = value;
                PropertyChanged?.Invoke(this, new(nameof(SelectedCustomer)));
            }
        }
    }

    void Add_Click(object sender, RoutedEventArgs e)
    {
        AddCustomer();
    }

    void Insert_Click(object sender, RoutedEventArgs e)
    {
        InsertCustomer();
    }

    int _id = 0;
    void AddCustomer()
    {
        _id++;
        Customers.Add(new(_id, $"Customer {_id}"));
    }

    void InsertCustomer()
    {
        _id++;
        Customers.Insert(2, new(_id, $"Customer {_id}"));
    }

    void UpdateCustomersArray()
    {
        var sel = CB.SelectedValue;
        CB.SelectedValue = null;
        CustomersArray = Customers.ToList();
        CB.SelectedValue = sel;
    }
}

A similar issue

Expected behavior

The Control should maintain the selected value and refresh accordingly.
It seems to me that it maintains the selected index, which does not work in this case.

Screenshots

Please see the screen recording. The drop down part of the control is missing, but you can still see the error at the end!
screen-recording-2024-05-23-08_07.webm

NuGet package version

WinUI 3 - Windows App SDK 1.5.3: 1.5.240428000

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• Editable combo box sets bound value to null when itemsource changes (#9573), similarity score: 0.78
• Cannot enter a custom value in editable ComboBox (#8242), similarity score: 0.78
• ComboBox weirdly interacts with other controls defined in XAML (#8125), similarity score: 0.77
• ComboBox behave unexpectedly when IsTextSearchEnabled="False" and IsEditable="True" (#9428), similarity score: 0.76

Closed similar issues:

• Combobox binding issue in ContentControl (#8078), similarity score: 0.76

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[kmahone]

I can reproduce the issue. As you said, it appears that it is maintaining the selected index instead of the item. You get the correct behavior if you actually select an item from the popup. But you get the incorrect behavior if you dismiss the popup by clicking away.