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

fixes #16841

Author: kplhub

angular/src/directives/proxies.ts

@@ -600,13 +600,14 @@ export class IonRadio {
   ionRadioDidUnload!: EventEmitter<CustomEvent>;
   ionStyle!: EventEmitter<CustomEvent>;
   ionSelect!: EventEmitter<CustomEvent>;
+  ionDeselect!: EventEmitter<CustomEvent>;
   ionFocus!: EventEmitter<CustomEvent>;
   ionBlur!: EventEmitter<CustomEvent>;
   el: HTMLElement
   constructor(c: ChangeDetectorRef, r: ElementRef) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionFocus', 'ionBlur']);
+    proxyOutputs(this, this.el, ['ionRadioDidLoad', 'ionRadioDidUnload', 'ionStyle', 'ionSelect', 'ionDeselect', 'ionFocus', 'ionBlur']);
   }
 }
 proxyInputs(IonRadio, ['color', 'mode', 'name', 'disabled', 'checked', 'value']);

core/src/components.d.ts

@@ -3285,6 +3285,10 @@ export namespace Components {
     */
     'onIonBlur'?: (event: CustomEvent<void>) => void;
     /**
+    * Emitted when checked radio button is selected.
+    */
+    'onIonDeselect'?: (event: CustomEvent<RadioChangeEventDetail>) => void;
+    /**
     * Emitted when the radio button has focus.
     */
     'onIonFocus'?: (event: CustomEvent<void>) => void;

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 = () => {