feat(radio-group): add missing implementation for property allowEmptySelection (#16880)

fixes #16841

core/src/components/radio-group/radio-group.tsx

@@ -73,6 +73,17 @@ export class RadioGroup implements ComponentInterface {
     }
   }
 
+  @Listen('ionDeselect')
+  onRadioDeselect(ev: Event) {
+    if (this.allowEmptySelection) {
+      const selectedRadio = ev.target as HTMLIonRadioElement | null;
+      if (selectedRadio) {
+        selectedRadio.checked = false;
+        this.value = undefined;
+      }
+    }
+  }
+
   componentDidLoad() {
     // Get the list header if it exists and set the id
     // this is used to set aria-labelledby

core/src/components/radio-group/test/standalone/index.html

@@ -28,6 +28,15 @@
     <ion-radio color="secondary" disabled></ion-radio>
   </ion-radio-group>
 
+  <p>
+    allow-empty-selection="true":&nbsp;
+    <ion-radio-group allow-empty-selection="true">
+      <ion-radio color="primary"></ion-radio>
+      <ion-radio color="secondary"></ion-radio>
+      <ion-radio color="tertiary"></ion-radio>
+    </ion-radio-group>
+  </p>
+
   <style>
     /* to be able to see the radio buttons */
     .radio-ios {

core/src/components/radio/radio.tsx

@@ -75,6 +75,12 @@ export class Radio implements ComponentInterface {
    */
   @Event() ionSelect!: EventEmitter<RadioChangeEventDetail>;
 
+  /**
+   * Emitted when checked radio button is selected.
+   * @internal
+   */
+  @Event() ionDeselect!: EventEmitter<RadioChangeEventDetail>;
+
   /**
    * Emitted when the radio button has focus.
    */
@@ -129,7 +135,11 @@ export class Radio implements ComponentInterface {
   }
 
   private onClick = () => {
-    this.checked = true;
+    if (this.checked) {
+      this.ionDeselect.emit();
+    } else {
+      this.checked = true;
+    }
   }
 
   private onKeyUp = () => {