From 8bb195dd9e10a28e1a548463858625138a3c066b Mon Sep 17 00:00:00 2001
From: rajforum <38824240+rajforum@users.noreply.github.com>
Date: Sun, 19 Mar 2023 11:04:40 +0530
Subject: [PATCH 1/2] Fix: groupValue not updated w.r.t value on change.

---
 README.md                              | 11 +++++++----
 addon/components/radio-button-input.js |  2 +-
 addon/components/radio-button.hbs      |  2 ++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index bf69776..00e5425 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,8 @@ The block form emits a label wrapping the input element and any elements passed
 ```javascript
 <RadioButton
   @value="blue"
-  @groupValue=color
+  @groupValue={{this.color}}
+  @onBeforeChange={{fn (mut this.color)}}
   @changed={{this.colorChanged}}
 >
   <span>Blue</span>
@@ -44,6 +45,7 @@ If you want more control over the DOM, the non-block form only emits a single in
   @value="green"
   @groupValue={{this.color}}
   @name="colors"
+  @onBeforeChange={{fn (mut this.color)}}
   @changed={{this.colorChanged}}
 />
 
@@ -90,9 +92,10 @@ _Optional:_
 
 _Actions:_
 
-| name    | description                                                              |
-| ------- | ------------------------------------------------------------------------ |
-| changed | fires when user interaction causes a radio-button to update `groupValue` |
+| name    | description                                                              | optional |
+| ------- | ------------------------------------------------------------------------ |--------- |
+| changed | fires when user interaction causes a radio-button to update `groupValue` | true     |
+| onBeforeChange | mutate the passed prop i.e `groupValue` with selected radio value | false    |
 
 ## Installing
 
diff --git a/addon/components/radio-button-input.js b/addon/components/radio-button-input.js
index 7794161..48b7a8d 100644
--- a/addon/components/radio-button-input.js
+++ b/addon/components/radio-button-input.js
@@ -15,7 +15,7 @@ export default class RadioButtonInputComponent extends Component {
 
   @action change() {
     if (this.args.groupValue !== this.args.value) {
-      // this.set('groupValue', value);
+      once(this.args, 'onBeforeChange', this.args.value);
       once(this.args, 'changed', this.args.value);
     }
   }
diff --git a/addon/components/radio-button.hbs b/addon/components/radio-button.hbs
index 5fd2690..49a0cf8 100644
--- a/addon/components/radio-button.hbs
+++ b/addon/components/radio-button.hbs
@@ -13,6 +13,7 @@
       @value={{@value}}
       aria-labelledby={{@ariaLabelledby}}
       aria-describedby={{@ariaDescribedby}}
+      @onBeforeChange={{fn @onBeforeChange}}
       @changed={{this.changed}}
     />
     {{yield}}
@@ -31,6 +32,7 @@
     @value={{@value}}
     aria-labelledby={{@ariaLabelledby}}
     aria-describedby={{@ariaDescribedby}}
+    @onBeforeChange={{fn @onBeforeChange}}
     @changed={{this.changed}}
   />
 {{/if}}

From 870dd74564262222b34750ba55b4da4e9a2a20d6 Mon Sep 17 00:00:00 2001
From: Raj Kishor <raj122922@paycor.com>
Date: Sun, 19 Mar 2023 11:59:39 +0530
Subject: [PATCH 2/2] - Update test cases as per `onBeforeChange` - Move
 `onBeforeChange` to radio-button

---
 addon/components/radio-button-input.js            | 1 -
 addon/components/radio-button.hbs                 | 2 --
 addon/components/radio-button.js                  | 8 +++++++-
 tests/integration/components/radio-button-test.js | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/addon/components/radio-button-input.js b/addon/components/radio-button-input.js
index 48b7a8d..d538450 100644
--- a/addon/components/radio-button-input.js
+++ b/addon/components/radio-button-input.js
@@ -15,7 +15,6 @@ export default class RadioButtonInputComponent extends Component {
 
   @action change() {
     if (this.args.groupValue !== this.args.value) {
-      once(this.args, 'onBeforeChange', this.args.value);
       once(this.args, 'changed', this.args.value);
     }
   }
diff --git a/addon/components/radio-button.hbs b/addon/components/radio-button.hbs
index 49a0cf8..5fd2690 100644
--- a/addon/components/radio-button.hbs
+++ b/addon/components/radio-button.hbs
@@ -13,7 +13,6 @@
       @value={{@value}}
       aria-labelledby={{@ariaLabelledby}}
       aria-describedby={{@ariaDescribedby}}
-      @onBeforeChange={{fn @onBeforeChange}}
       @changed={{this.changed}}
     />
     {{yield}}
@@ -32,7 +31,6 @@
     @value={{@value}}
     aria-labelledby={{@ariaLabelledby}}
     aria-describedby={{@ariaDescribedby}}
-    @onBeforeChange={{fn @onBeforeChange}}
     @changed={{this.changed}}
   />
 {{/if}}
diff --git a/addon/components/radio-button.js b/addon/components/radio-button.js
index fde7408..c8f427a 100644
--- a/addon/components/radio-button.js
+++ b/addon/components/radio-button.js
@@ -32,7 +32,13 @@ export default class RadioButtonComponent extends Component {
   }
 
   @action changed(newValue) {
-    let changedAction = this.args.changed;
+    let changedAction = this.args.changed,
+      onBeforeChangeAction = this.args.onBeforeChange;
+
+    //todo: make it required, instead of optional
+    if (onBeforeChangeAction) {
+      onBeforeChangeAction(newValue);
+    }
 
     // providing a closure action is optional
     if (changedAction) {
diff --git a/tests/integration/components/radio-button-test.js b/tests/integration/components/radio-button-test.js
index 99665df..8b39b8d 100644
--- a/tests/integration/components/radio-button-test.js
+++ b/tests/integration/components/radio-button-test.js
@@ -31,13 +31,13 @@ module('Integration | Components | Radio Button', function (hooks) {
     this.set('changed', (newValue) => {
       changedActionCallCount++;
       assert.strictEqual(newValue, 'component-value', 'updates groupValue');
-      this.set('groupValue', newValue);
     });
 
     await render(hbs`
       <RadioButton
         @groupValue={{this.groupValue}}
         @value='component-value'
+        @onBeforeChange={{fn (mut this.groupValue)}}
         @changed={{this.changed}}
       />
     `);