Fix: groupValue not updated w.r.t value on change.

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
 

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) {
-      // this.set('groupValue', value);
       once(this.args, 'changed', this.args.value);
     }
   }

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

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}}
       />
     `);