fix(ui5-radiobutton): fix single selection within group (#355)

Author: ilhan007

packages/main/src/RadioButtonGroup.js

@@ -154,12 +154,10 @@ class RadioButtonGroup {
 	static enforceSingleSelection(radioBtn, groupName) {
 		const selectedRadio = this.getSelectedRadioFromGroup(groupName);
 
-		if (!selectedRadio) {
-			return;
-		}
-
 		if (radioBtn.selected) {
-			if (radioBtn !== selectedRadio) {
+			if (!selectedRadio) {
+				this.selectedRadios.set(groupName, radioBtn);
+			} else if (radioBtn !== selectedRadio) {
 				this._deselectRadio(selectedRadio);
 				this.selectedRadios.set(groupName, radioBtn);
 			}

packages/main/test/sap/ui/webcomponents/main/pages/RadioButton.html

@@ -50,9 +50,9 @@ <h1>ui5-radiobutton</h1>
 		<ui5-title>Group of states</ui5-title>
 		<ui5-label id="lblRadioGroup"></ui5-label>
 		<ui5-label id="lblEventCounter"></ui5-label>
-		<ui5-radiobutton id="groupRb7" text="None selected" value-state="None" selected name="GroupB"></ui5-radiobutton>
-		<ui5-radiobutton id="groupRb8" text="Warning" value-state="Warning" name="GroupB"></ui5-radiobutton>
-		<ui5-radiobutton id="groupRb9"text="Error" value-state="Error" name="GroupB"></ui5-radiobutton>
+		<ui5-radiobutton id="groupRb7" text="None selected" value-state="None" name="GroupB"></ui5-radiobutton>
+		<ui5-radiobutton id="groupRb8" text="Warning" value-state="Warning" selected name="GroupB"></ui5-radiobutton>
+		<ui5-radiobutton id="groupRb9"text="Error" value-state="Error" selected name="GroupB"></ui5-radiobutton>
 		<ui5-radiobutton id="groupRb10" text="Default selected" value-state="None" selected name="GroupB"></ui5-radiobutton>
 		<ui5-radiobutton id="groupRb11" text="Other group selected" value-state="None" selected name="GroupBB"></ui5-radiobutton>
 	</div>

packages/main/test/specs/RadioButton.spec.js

@@ -92,13 +92,15 @@ describe("RadioButton general interaction", () => {
 	});
 
 	it("tests single selection within group, even if multiple radios are set as selected", () => {
-		// radio with property selected=true, but not selected
-		const radioButtonNotSelected = browser.findElementDeep("#groupRb7 >>> .sapMRb");
+		// radios with property selected=true, but not selected
+		const radioButtonNotSelected1 = browser.findElementDeep("#groupRb8 >>> .sapMRb");
+		const radioButtonNotSelected2 = browser.findElementDeep("#groupRb9 >>> .sapMRb");
 
 		// radio with property selected=true and actually selected as subsequent
 		const radioButtonActuallySelected = browser.findElementDeep("#groupRb10 >>> .sapMRb");
 
-		assert.ok(!radioButtonNotSelected.hasClass("sapMRbSel"), "The radio is not selected as following one selected");
+		assert.ok(!radioButtonNotSelected1.hasClass("sapMRbSel"), "The radio is not selected as the last one is selected");
+		assert.ok(!radioButtonNotSelected2.hasClass("sapMRbSel"), "The radio is not selected as the last one is selected");
 		assert.ok(radioButtonActuallySelected.hasClass("sapMRbSel"), 'The correct radio is selected');
 	});