[Android] Fix RadioButton selection in Group (#22787)

* Revert changes to fix the issue * Added repro sample * Added UITest * More samples * Added new UITest * Fix the issue * Removed unnecessary changes * Fixed test description * Adding snapshots * More snapshots
dotnet · Jun 5, 2024 · df93d3a · df93d3a
1 parent c8ce71e
commit df93d3a
Show file tree

Hide file tree

Showing 11 changed files with 301 additions and 20 deletions.
diff --git a/src/Controls/src/Core/RadioButton/RadioButton.cs b/src/Controls/src/Core/RadioButton/RadioButton.cs
@@ -425,7 +425,7 @@ bool MatchesScope(RadioButtonScopeMessage message)
 
 		void HandleRadioButtonGroupSelectionChanged(RadioButton selected, RadioButtonGroupSelectionChanged args)
 		{
-			if (!IsChecked || selected == this || string.IsNullOrEmpty(GroupName) || GroupName != selected.GroupName || object.Equals(Value, args.Value) || !MatchesScope(args))
+			if (!IsChecked || selected == this || string.IsNullOrEmpty(GroupName) || GroupName != selected.GroupName || (Value is not null && object.Equals(Value, args.Value)) || !MatchesScope(args))
 			{
 				return;
 			}

diff --git a/src/Controls/tests/Core.UnitTests/RadioButtonTests.cs b/src/Controls/tests/Core.UnitTests/RadioButtonTests.cs
@@ -5,15 +5,14 @@ namespace Microsoft.Maui.Controls.Core.UnitTests
 	using Grid = Microsoft.Maui.Controls.Compatibility.Grid;
 	using StackLayout = Microsoft.Maui.Controls.Compatibility.StackLayout;
 
-
 	public class RadioButtonTests : BaseTestFixture
 	{
 		[Fact]
 		public void RadioButtonAddedToGroupGetsGroupName()
 		{
 			var layout = new StackLayout();
 			var groupName = "foo";
-			var radioButton = new RadioButton() { Value = 1 };
+			var radioButton = new RadioButton();
 
 			layout.SetValue(RadioButtonGroup.GroupNameProperty, groupName);
 			layout.Children.Add(radioButton);
@@ -26,7 +25,7 @@ public void NestedRadioButtonAddedToGroupGetsGroupName()
 		{
 			var layout = new StackLayout();
 			var groupName = "foo";
-			var radioButton = new RadioButton() { Value = 1 };
+			var radioButton = new RadioButton();
 
 			layout.SetValue(RadioButtonGroup.GroupNameProperty, groupName);
 
@@ -57,7 +56,7 @@ public void LayoutGroupNameAppliesToExistingRadioButtons()
 		{
 			var layout = new StackLayout();
 			var groupName = "foo";
-			var radioButton = new RadioButton() { Value = 1 };
+			var radioButton = new RadioButton();
 
 			layout.Children.Add(radioButton);
 			layout.SetValue(RadioButtonGroup.GroupNameProperty, groupName);
@@ -72,8 +71,8 @@ public void UpdatedGroupNameAppliesToRadioButtonsWithOldGroupName()
 			var groupName = "foo";
 			var updatedGroupName = "bar";
 			var otherGroupName = "other";
-			var radioButton1 = new RadioButton() { Value = 1 };
-			var radioButton2 = new RadioButton() { GroupName = otherGroupName, Value = 2 };
+			var radioButton1 = new RadioButton();
+			var radioButton2 = new RadioButton() { GroupName = otherGroupName };
 
 			layout.Children.Add(radioButton1);
 			layout.Children.Add(radioButton2);
@@ -90,10 +89,10 @@ public void ThereCanBeOnlyOne()
 		{
 			var groupName = "foo";
 
-			var radioButton1 = new RadioButton() { GroupName = groupName, Value = 1 };
-			var radioButton2 = new RadioButton() { GroupName = groupName, Value = 2 };
-			var radioButton3 = new RadioButton() { GroupName = groupName, Value = 3 };
-			var radioButton4 = new RadioButton() { GroupName = groupName, Value = 4 };
+			var radioButton1 = new RadioButton() { GroupName = groupName };
+			var radioButton2 = new RadioButton() { GroupName = groupName };
+			var radioButton3 = new RadioButton() { GroupName = groupName };
+			var radioButton4 = new RadioButton() { GroupName = groupName };
 
 			var layout = new Grid();
 
@@ -120,9 +119,9 @@ public void ThereCanBeOnlyOne()
 		[Fact]
 		public void ImpliedGroup()
 		{
-			var radioButton1 = new RadioButton() { Value = 1 };
-			var radioButton2 = new RadioButton() { Value = 2 };
-			var radioButton3 = new RadioButton() { Value = 3 };
+			var radioButton1 = new RadioButton();
+			var radioButton2 = new RadioButton();
+			var radioButton3 = new RadioButton();
 
 			var layout = new Grid();
 
@@ -146,9 +145,9 @@ public void ImpliedGroup()
 		[Fact]
 		public void ImpliedGroupDoesNotIncludeExplicitGroups()
 		{
-			var radioButton1 = new RadioButton() { Value = 1 };
-			var radioButton2 = new RadioButton() { Value = 2 };
-			var radioButton3 = new RadioButton() { GroupName = "foo", Value = 3 };
+			var radioButton1 = new RadioButton();
+			var radioButton2 = new RadioButton();
+			var radioButton3 = new RadioButton() { GroupName = "foo" };
 
 			var layout = new Grid();
 
@@ -167,9 +166,9 @@ public void ImpliedGroupDoesNotIncludeExplicitGroups()
 		[Fact]
 		public void RemovingSelectedButtonFromGroupClearsSelection()
 		{
-			var radioButton1 = new RadioButton() { GroupName = "foo", Value = 1 };
-			var radioButton2 = new RadioButton() { GroupName = "foo", Value = 2 };
-			var radioButton3 = new RadioButton() { GroupName = "foo", Value = 3 };
+			var radioButton1 = new RadioButton() { GroupName = "foo" };
+			var radioButton2 = new RadioButton() { GroupName = "foo" };
+			var radioButton3 = new RadioButton() { GroupName = "foo" };
 
 			radioButton1.IsChecked = true;
 			radioButton2.IsChecked = true;

diff --git a/...tCases.Android.Tests/snapshots/android/RadioButtonUpdateValueInsideBorderNo.png b/...tCases.Android.Tests/snapshots/android/RadioButtonUpdateValueInsideBorderNo.png
diff --git a/...Cases.Android.Tests/snapshots/android/RadioButtonUpdateValueInsideBorderYes.png b/...Cases.Android.Tests/snapshots/android/RadioButtonUpdateValueInsideBorderYes.png
diff --git a/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue22183.cs b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue22183.cs
@@ -0,0 +1,31 @@
+#if IOS
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+    public class Issue22183: _IssuesUITest
+	{
+		public Issue22183(TestDevice device) : base(device)
+		{
+		}
+
+		public override string Issue => "RadioButton with value cannot display selected state correctly";
+
+		[Test]
+		public void RadioButtonWithValueChangeSelected()
+		{
+			App.WaitForElement("TestCollectionView");
+
+			App.Tap("True_0");
+			App.Tap("False_0");
+
+			VerifyScreenshot();
+
+			App.Tap("True_1");
+			App.Tap("False_1");
+		}
+	}
+}
+#endif
diff --git a/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue22750.cs b/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue22750.cs
@@ -0,0 +1,31 @@
+#if ANDROID
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+	public class Issue22750 : _IssuesUITest
+	{
+		public Issue22750(TestDevice device) : base(device)
+		{
+		}
+
+		public override string Issue => "Using radiobuttons in a group, pressing one button works fine, but pressing the second does not reset the first hence";
+
+		[Test]
+		public void RadioButtonUpdateValueInsideBorder()
+		{
+			App.WaitForElement("WaitForStubControl");
+
+			App.Tap("Yes");
+
+			App.Tap("No");
+			VerifyScreenshot("RadioButtonUpdateValueInsideBorderNo");
+
+			App.Tap("Yes");
+			VerifyScreenshot("RadioButtonUpdateValueInsideBorderYes");
+		}
+	}
+}
+#endif
diff --git a/.../tests/TestCases.iOS.Tests/snapshots/ios/RadioButtonWithValueChangeSelected.png b/.../tests/TestCases.iOS.Tests/snapshots/ios/RadioButtonWithValueChangeSelected.png
diff --git a/src/Controls/tests/TestCases/Issues/Issue22183.xaml b/src/Controls/tests/TestCases/Issues/Issue22183.xaml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Maui.Controls.Sample.Issues.Issue22183"
+             xmlns:local="clr-namespace:Maui.Controls.Sample.Issues">
+  <AbsoluteLayout 
+    VerticalOptions="Fill">
+    <CollectionView 
+      AutomationId="TestCollectionView"
+      ItemsSource="{Binding ItemSource}" 
+      AbsoluteLayout.LayoutFlags="All" 
+      AbsoluteLayout.LayoutBounds="0,0,1,1">
+      <CollectionView.ItemTemplate>
+        <DataTemplate>
+          <VerticalStackLayout 
+            x:DataType="local:Issue22183Model" 
+            Padding="20" 
+            Margin="0,0">
+            <Border Padding="10">
+              <VerticalStackLayout 
+                RadioButtonGroup.GroupName="{Binding GroupId}" 
+                RadioButtonGroup.SelectedValue="{Binding ShowOptions}">
+                <RadioButton 
+                  AutomationId="{Binding False}"
+                  Content="{Binding False}" 
+                  VerticalOptions="Center">
+                  <RadioButton.Value>
+                    <x:Boolean>False</x:Boolean>
+                  </RadioButton.Value>
+                </RadioButton>
+                <RadioButton 
+                  AutomationId="{Binding True}"
+                  Content="{Binding True}" 
+                  VerticalOptions="Center">
+                  <RadioButton.Value>
+                    <x:Boolean>True</x:Boolean>
+                  </RadioButton.Value>
+                </RadioButton>
+              </VerticalStackLayout>
+            </Border>
+            <VerticalStackLayout 
+              IsVisible="{Binding ShowOptions}"       
+              BindableLayout.ItemsSource="{Binding Options}">
+              <BindableLayout.ItemTemplate>
+                <DataTemplate x:DataType="local:Options">
+                  <HorizontalStackLayout>
+                    <CheckBox />
+                    <Label
+                      VerticalOptions="Center" 
+                      Text="{Binding Name}" />
+                  </HorizontalStackLayout>
+                </DataTemplate>
+              </BindableLayout.ItemTemplate>
+            </VerticalStackLayout>
+          </VerticalStackLayout>
+        </DataTemplate>
+      </CollectionView.ItemTemplate>
+    </CollectionView>
+  </AbsoluteLayout>
+</ContentPage>
diff --git a/src/Controls/tests/TestCases/Issues/Issue22183.xaml.cs b/src/Controls/tests/TestCases/Issues/Issue22183.xaml.cs
@@ -0,0 +1,71 @@
+using System.Collections.ObjectModel;
+using Microsoft.Maui.Controls;
+using Microsoft.Maui.Controls.Xaml;
+
+namespace Maui.Controls.Sample.Issues
+{
+	[XamlCompilation(XamlCompilationOptions.Compile)]
+	[Issue(IssueTracker.Github, 22183, "RadioButton with value cannot display selected state correctly", PlatformAffected.iOS)]
+	public partial class Issue22183 : ContentPage
+	{
+		public Issue22183()
+		{
+			InitializeComponent();
+
+			BindingContext = new Issue22183ViewModel();
+		}
+	}
+
+	public class Issue22183ViewModel
+	{
+		public ObservableCollection<Issue22183Model> ItemSource { get; } = new ObservableCollection<Issue22183Model>(
+			[new Issue22183Model()
+			{
+				GroupId = 0,
+			}, 
+			new Issue22183Model()
+			{
+				GroupId = 1,
+			}]);
+	}
+
+	public class Issue22183Model : BindableObject
+	{
+		public int GroupId { get; set; }
+
+		public string False => $"False_{GroupId}";
+
+		public string True => $"True_{GroupId}";
+
+		public static readonly BindableProperty ShowOptionsProperty =	
+			BindableProperty.Create(nameof(ShowOptions), typeof(bool), typeof(Issue22183Model));
+
+		public bool ShowOptions
+		{
+			set => SetValue(ShowOptionsProperty, value);
+			get => (bool)GetValue(ShowOptionsProperty);
+		}
+
+		public ObservableCollection<Options> Options { get; }
+
+		public Issue22183Model()
+		{
+			ShowOptions = false;
+
+			Options = new ObservableCollection<Options>();
+
+			for (int i = 0; i < 10; i++)
+			{
+				Options.Add(new Options
+				{
+					Name = $"Options_{i}",
+				});
+			}
+		}
+	}
+
+	public class Options
+	{
+		public string Name { get; set; }
+	}
+}
diff --git a/src/Controls/tests/TestCases/Issues/Issue22750.xaml b/src/Controls/tests/TestCases/Issues/Issue22750.xaml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage 
+  xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+  x:Class="Maui.Controls.Sample.Issues.Issue22750"
+  xmlns:ns="clr-namespace:Maui.Controls.Sample.Issues">
+  <Border 
+    Padding="15,10,0,0">
+    <Border.Shadow>
+      <Shadow
+        Brush="{AppThemeBinding Light=LightGray, Dark=Gray}"
+        Offset="5,5" 
+        Opacity="0.5"/>
+    </Border.Shadow>
+    <VerticalStackLayout>
+      <Label 
+        AutomationId="WaitForStubControl"
+        Text="Lorem ipsum dolor sit amet"
+        FontAttributes="Bold" />
+      <Label 
+        Text="{Binding Text}" 
+        FontSize="Small" 
+        HorizontalOptions="Start"
+        VerticalOptions="Start"
+        Padding="0,0,15,0"/>
+      <HorizontalStackLayout>
+        <RadioButton 
+          Content="Yes" 
+          AutomationId="Yes"
+          GroupName="Issue22750Group" 
+          CheckedChanged="OnRadioButtonCheckedChanged" />
+        <RadioButton 
+          Content="No" 
+          AutomationId="No"
+          GroupName="Issue22750Group" 
+          CheckedChanged="OnRadioButtonCheckedChanged" />
+      </HorizontalStackLayout>
+    </VerticalStackLayout>
+  </Border>
+</ContentPage>