2 files changed, 18 insertions, 2 deletions
diff --git a/ui/app/components/button-group/button-group.component.js b/ui/app/components/button-group/button-group.component.js
index 723f9b526..17a281030 100644
--- a/ui/app/components/button-group/button-group.component.js
+++ b/ui/app/components/button-group/button-group.component.js
@@ -10,6 +10,7 @@ export default class ButtonGroup extends PureComponent {
     children: PropTypes.array,
     className: PropTypes.string,
     style: PropTypes.object,
+    newActiveButtonIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -23,9 +24,10 @@ export default class ButtonGroup extends PureComponent {
       : this.props.defaultActiveButtonIndex,
   }
 
-  componentDidUpdate (prevProps, prevState) {
+  componentDidUpdate (_, prevState) {
+    // Provides an API for dynamically updating the activeButtonIndex
     if (typeof this.props.newActiveButtonIndex === 'number' && prevState.activeButtonIndex !== this.props.newActiveButtonIndex) {
-      this.setState({ activeButtonIndex: prevProps.newActiveButtonIndex })
+      this.setState({ activeButtonIndex: this.props.newActiveButtonIndex })
     }
   }
 
diff --git a/ui/app/components/button-group/tests/button-group-component.test.js b/ui/app/components/button-group/tests/button-group-component.test.js
index f07bb97c8..0bece90d6 100644
--- a/ui/app/components/button-group/tests/button-group-component.test.js
+++ b/ui/app/components/button-group/tests/button-group-component.test.js
@@ -35,6 +35,20 @@ describe('ButtonGroup Component', function () {
     ButtonGroup.prototype.renderButtons.resetHistory()
   })
 
+  describe('componentDidUpdate', () => {
+    it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => {
+      assert.equal(wrapper.state('activeButtonIndex'), 1)
+      wrapper.setProps({ newActiveButtonIndex: 2 })
+      assert.equal(wrapper.state('activeButtonIndex'), 2)
+    })
+
+    it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => {
+      assert.equal(wrapper.state('activeButtonIndex'), 1)
+      wrapper.setProps({ newActiveButtonIndex: null })
+      assert.equal(wrapper.state('activeButtonIndex'), 1)
+    })
+  })
+
   describe('handleButtonClick', () => {
     it('should set the activeButtonIndex', () => {
       assert.equal(wrapper.state('activeButtonIndex'), 1)