RadioButton example from Xamarin Forms gallery converted to MAUI doesn't work on Android: radio buttons are not selectable

[martin-honnen]

Description

I have tried to adapt some samples from the Xamarin Forms gallery to MAUI RC 1, the sample with RadioButtons works fine for me on Windows 10 but both in the Android emulator as well as on an Android phone it doesn't work, the radio buttons are not selectable, and the event handlers (therefore?) don't fire.

Sample:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Microsoft.Maui.Graphics;

namespace MAUIRC1RadioButtonGalleryExample
{
    public class RadioButtonDemoPage : ContentPage
    {
        Label colorLabel;
        Label fruitLabel;

        public RadioButtonDemoPage()
        {
            Label header = new Label
            {
                Text = "RadioButton",
                FontSize = 50,
                FontAttributes = FontAttributes.Bold,
                HorizontalOptions = LayoutOptions.Center
            };

            fruitLabel = new Label { Text = "You have chosen:" };
            colorLabel = new Label { Text = "You have chosen:" };

            RadioButton redRadioButton = new RadioButton { Content = "Red", TextColor = Color.FromRgb(255, 0, 0), GroupName = "colors" };
            redRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;
            RadioButton greenRadioButton = new RadioButton { Content = "Green", TextColor = Color.FromRgb(0, 255, 0), GroupName = "colors" };
            greenRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;
            RadioButton blueRadioButton = new RadioButton { Content = "Blue", TextColor = Color.FromRgb(0, 0, 255), GroupName = "colors" };
            blueRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;
            RadioButton otherColorRadioButton = new RadioButton { Content = "Other", GroupName = "colors" };
            otherColorRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;

            RadioButton appleRadioButton = new RadioButton { Content = "Apple", GroupName = "fruits" };
            appleRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;
            RadioButton bananaRadioButton = new RadioButton { Content = "Banana", GroupName = "fruits" };
            bananaRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;
            RadioButton pineappleRadioButton = new RadioButton { Content = "Pineapple", GroupName = "fruits" };
            pineappleRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;
            RadioButton otherFruitRadioButton = new RadioButton { Content = "Other", GroupName = "fruits" };
            otherFruitRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;

            // Build the page.
            Title = "RadioButton Demo";
            Content = new StackLayout
            {
                Margin = new Thickness(10),
                Children =
                {
                    header,
                    new Label { Text = "What's your favourite color?" },
                    redRadioButton,
                    greenRadioButton,
                    blueRadioButton,
                    otherColorRadioButton,
                    colorLabel,
                    new Label { Text = "What's your favorite fruit?" },
                    appleRadioButton,
                    bananaRadioButton,
                    pineappleRadioButton,
                    otherFruitRadioButton,
                    fruitLabel
                }
            };
        }

        void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            colorLabel.Text = $"You have chosen: {button.Content}";
        }

        void OnFruitsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            fruitLabel.Text = $"You have chosen: {button.Content}";
        }
    }
}

Connect it to an app with e.g.

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new RadioButtonDemoPage();
	}
}

The two radio button groups show up on the screen of the Android device (although for the first group the labels are not colored) but the radio buttons are not selectable at all, neither with an Android device in the emulator nor on an actual Android device.

Steps to Reproduce

1. Create new MAUI app
2. Add class RadioButtonDemoPage.cs having code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Microsoft.Maui.Graphics;

namespace MAUIRC1RadioButtonGalleryExample
{
    public class RadioButtonDemoPage : ContentPage
    {
        Label colorLabel;
        Label fruitLabel;

        public RadioButtonDemoPage()
        {
            Label header = new Label
            {
                Text = "RadioButton",
                FontSize = 50,
                FontAttributes = FontAttributes.Bold,
                HorizontalOptions = LayoutOptions.Center
            };

            fruitLabel = new Label { Text = "You have chosen:" };
            colorLabel = new Label { Text = "You have chosen:" };

            RadioButton redRadioButton = new RadioButton { Content = "Red", TextColor = Color.FromRgb(255, 0, 0), GroupName = "colors" };
            redRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;
            RadioButton greenRadioButton = new RadioButton { Content = "Green", TextColor = Color.FromRgb(0, 255, 0), GroupName = "colors" };
            greenRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;
            RadioButton blueRadioButton = new RadioButton { Content = "Blue", TextColor = Color.FromRgb(0, 0, 255), GroupName = "colors" };
            blueRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;
            RadioButton otherColorRadioButton = new RadioButton { Content = "Other", GroupName = "colors" };
            otherColorRadioButton.CheckedChanged += OnColorsRadioButtonCheckedChanged;

            RadioButton appleRadioButton = new RadioButton { Content = "Apple", GroupName = "fruits" };
            appleRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;
            RadioButton bananaRadioButton = new RadioButton { Content = "Banana", GroupName = "fruits" };
            bananaRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;
            RadioButton pineappleRadioButton = new RadioButton { Content = "Pineapple", GroupName = "fruits" };
            pineappleRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;
            RadioButton otherFruitRadioButton = new RadioButton { Content = "Other", GroupName = "fruits" };
            otherFruitRadioButton.CheckedChanged += OnFruitsRadioButtonCheckedChanged;

            // Build the page.
            Title = "RadioButton Demo";
            Content = new StackLayout
            {
                Margin = new Thickness(10),
                Children =
                {
                    header,
                    new Label { Text = "What's your favourite color?" },
                    redRadioButton,
                    greenRadioButton,
                    blueRadioButton,
                    otherColorRadioButton,
                    colorLabel,
                    new Label { Text = "What's your favorite fruit?" },
                    appleRadioButton,
                    bananaRadioButton,
                    pineappleRadioButton,
                    otherFruitRadioButton,
                    fruitLabel
                }
            };
        }

        void OnColorsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            colorLabel.Text = $"You have chosen: {button.Content}";
        }

        void OnFruitsRadioButtonCheckedChanged(object sender, CheckedChangedEventArgs e)
        {
            RadioButton button = sender as RadioButton;
            fruitLabel.Text = $"You have chosen: {button.Content}";
        }
    }
}

3. connect it to the main app with e.g.

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

		MainPage = new RadioButtonDemoPage();
	}
}

Run the app on Android 11 device and try to select a radio button, it doesn't work.

Version with bug

Release Candidate 1 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11

Did you find any workaround?

No, I haven't been able to get this to work for Android.

Relevant log output

No response

[martin-honnen]

I have uploaded the project to Github: https://github.com/martin-honnen/MAUIRC1RadioButtonGalleryExample

[kristinx0211]

verified work on windows. but not work on Android 11.

[jsuarezruiz]

Cannot reproduce the issue in main branch:

[ghost]

Hi @martin-honnen. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[martin-honnen]

Confirmed fixed in RC 2, I guess due to the fix of #5773.