feat(dropdownv2): Support uncontrolled props (carbon-design-system#729)

In the case that the selected item is driven by an external component.
joshblack · Mar 22, 2018 · 64f4698 · 64f4698
1 parent 38b8f56
commit 64f4698
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git 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
@@ -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,