From 09726b0d353619382d448b94ae1f17a5753f30ce Mon Sep 17 00:00:00 2001
From: kplhub <kplhub@users.noreply.github.com>
Date: Mon, 31 Dec 2018 17:24:44 +0100
Subject: [PATCH] feat(radio-group): add missing implementation for property
 allowEmptySelection (#16880)

fixes #16841
---
 angular/src/directives/proxies.ts                    |  3 ++-
 core/src/components.d.ts                             |  4 ++++
 core/src/components/radio-group/radio-group.tsx      | 11 +++++++++++
 .../radio-group/test/standalone/index.html           |  9 +++++++++
 core/src/components/radio/radio.tsx                  | 12 +++++++++++-
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 2d8691052b..a01d68c36e 100644
--- a/angular/src/directives/proxies.ts
+++ b/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']);
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index c4b18c9c38..53f2d3879a 100644
--- a/core/src/components.d.ts
+++ b/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;
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index 52a7a9ff5a..191528f480 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/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
diff --git a/core/src/components/radio-group/test/standalone/index.html b/core/src/components/radio-group/test/standalone/index.html
index 0a5ccbb7b6..10c7573281 100644
--- a/core/src/components/radio-group/test/standalone/index.html
+++ b/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 {
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index a13f57b4c7..893e76a650 100644
--- a/core/src/components/radio/radio.tsx
+++ b/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 = () => {