adospace / reactorui-maui

MauiReactor is a MVU UI framework built on top of .NET MAUI
MIT License
588 stars 49 forks source link

Bug in Picker #195

Closed Code-DJ closed 8 months ago

Code-DJ commented 8 months ago

There may be a bug in the Picker control either in reactorui or possibly the underlying MAUI control.

iOS - 2.0.15-beta

This is a slightly modified version of the PickerTestPage. Run with .UseMauiReactorApp<MainPage>(). When you run the app, note how the label changes from (-1) to (1) but the Picker never shows the selected value. If you click on the Picker and then select something, it works.

Note: I added Task.Run with delay to simulate API call but it doesn't work without it either.

public record Person(string FirstName, string LastName, DateTime DateOfBirth)
{
    public override string ToString() => $"{FirstName} {LastName} ({DateTime.Today.Year - DateOfBirth.Year})";
};

class MainPageState
{
    public Person[] Persons { get; set; } = [];
    public int SelectedPersonIndex { get; set; } = -1;
    public Person SelectedPerson => SelectedPersonIndex == -1 ? null : Persons[SelectedPersonIndex];
}

class MainPage : Component<MainPageState>
{
    protected override void OnMounted()
    {
        base.OnMounted();

        Tasks.Task.Run(async () =>
        {
            await Tasks.Task.Delay(1000);

            var person1 = new Person("John", "Doe", new DateTime(1980, 5, 10));
            var person2 = new Person("Jane", "Smith", new DateTime(1990, 6, 20));
            var person3 = new Person("Alice", "Johnson", new DateTime(1985, 7, 30));
            var person4 = new Person("Bob", "Williams", new DateTime(2000, 8, 15));
            var person5 = new Person("Charlie", "Brown", new DateTime(1995, 9, 25));

            SetState(state =>
            {
                state.Persons = [person1, person2, person3, person4, person5];
                state.SelectedPersonIndex = 1;
            });
        });
    }

    public override VisualNode Render()
    {
        return new ContentPage
        {
            new VStack(spacing: 25)
            {
                new Picker()
                    .Title($"Select a person ({State.SelectedPersonIndex})")
                    .SelectedIndex(State.SelectedPersonIndex)
                    .ItemsSource(State.Persons.Select(_=> $"{_.FirstName} {_.LastName}").ToList())
                    .OnSelectedIndexChanged(index => SetState(s => s.SelectedPersonIndex = index)),

                new Label($"Selected: {State.SelectedPerson}"),

                new Button("Reset")
                    .OnClicked(() => SetState(s => s.SelectedPersonIndex = -1))
            }
            .VCenter()
            .Padding(10, 0)
        };
    }
}
adospace commented 8 months ago

I can confirm that it is a MauiReactor bug, the Picker expects that the selected index is valid but MauiReactor was setting it before the ItemsSource. Releasing in coming version, thanks for the report

adospace commented 8 months ago

fixed in 2.0.18-beta

Code-DJ commented 8 months ago

Hi @adospace I didn't see any Picker related code in you fixes from 2.0.18-beta so assumed you were still working on it. Will try and update this comment. Thank you!

adospace commented 8 months ago

Sorry it was from 2.0.17 beta, it should work with the latest version anyway

Code-DJ commented 8 months ago

It works. Thank you!