From 64f4698a29e10a0f2e55fcf6bb6d5ed359f366b4 Mon Sep 17 00:00:00 2001
From: Paul Sachs <psachs21@users.noreply.github.com>
Date: Thu, 22 Mar 2018 15:14:29 -0400
Subject: [PATCH] feat(dropdownv2): Support uncontrolled props (#729)

In the case that the selected item is driven by an external component.
---
 src/components/DropdownV2/DropdownV2-story.js | 25 +++++++++++++++++++
 src/components/DropdownV2/DropdownV2.js       |  9 ++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/DropdownV2/DropdownV2-story.js b/src/components/DropdownV2/DropdownV2-story.js
index fead5cca0b54..462a7b95518d 100644
--- a/src/components/DropdownV2/DropdownV2-story.js
+++ b/src/components/DropdownV2/DropdownV2-story.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf, action } from '@storybook/react';
 import DropdownV2 from '../DropdownV2';
+import WithState from '../../tools/withState';
 
 const items = [
   {
@@ -89,4 +90,28 @@ storiesOf('DropdownV2', module)
         />
       </div>
     )
+  )
+  .addWithInfo(
+    'fully controlled',
+    `
+    Sometimes you want to control everything.
+  `,
+    () => (
+      <WithState initialState={{ selectedItem: items[0] }}>
+        {({ state, setState }) => (
+          <div style={{ width: 300 }}>
+            <DropdownV2
+              type="inline"
+              label="Label"
+              items={items}
+              itemToString={item => (item ? item.text : '')}
+              onChange={({ selectedItem }) =>
+                setTimeout(() => setState({ selectedItem }), 1000)
+              }
+              selectedItem={state.selectedItem}
+            />
+          </div>
+        )}
+      </WithState>
+    )
   );
diff --git a/src/components/DropdownV2/DropdownV2.js b/src/components/DropdownV2/DropdownV2.js
index f2bd4a8675c7..9849f16aba71 100644
--- a/src/components/DropdownV2/DropdownV2.js
+++ b/src/components/DropdownV2/DropdownV2.js
@@ -43,6 +43,11 @@ export default class DropdownV2 extends React.Component {
     label: PropTypes.node.isRequired,
 
     type: ListBoxPropTypes.ListBoxType,
+
+    /**
+     * In the case you want to control the dropdown selection entirely.
+     */
+    selectedItem: PropTypes.object,
   };
 
   static defaultProps = {
@@ -66,13 +71,15 @@ export default class DropdownV2 extends React.Component {
       itemToString,
       type,
       initialSelectedItem,
+      selectedItem,
     } = this.props;
     const className = cx('bx--dropdown-v2', containerClassName);
     return (
       <Downshift
         onChange={this.handleOnChange}
         itemToString={itemToString}
-        defaultSelectedItem={initialSelectedItem}>
+        defaultSelectedItem={initialSelectedItem}
+        selectedItem={selectedItem}>
         {({
           isOpen,
           itemToString,