Add closeOnSelect prop to SelectMenu (#588)

* Add closeOnSelect prop to SelectMenu

This change adds a prop that when true the select
menu will close when an option has been selected.

closes #456

* Add docs for SelectMenu closeOnSave

docs/src/pages/components/select-menu.mdx

@@ -18,6 +18,12 @@ and uses `react-tiny-virtual-list` for the rendering of the virtualized list of
 The `SelectMenu` is unopinionated in how many items are selected in the list.
 Pass an array to the `selected` prop to select more items.
 
+## Close on select
+
+The `SelectMenu` by default will stay open when an option is selected.
+This can be configured so that the menu closes on selection.
+This will not apply for Multiselect menus.
+
 ## Options prop structure
 
 ```js static

src/select-menu/src/OptionsList.js

@@ -35,10 +35,17 @@ export default class OptionsList extends PureComponent {
      */
     isMultiSelect: PropTypes.bool,
 
+    /**
+     * When true, menu closes on option selection.
+     */
+    closeOnSelect: PropTypes.bool,
+
     /**
      * This holds the values of the options
      */
-    selected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+    selected: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    ),
     onSelect: PropTypes.func,
     onDeselect: PropTypes.func,
     onFilterChange: PropTypes.func,
@@ -201,6 +208,9 @@ export default class OptionsList extends PureComponent {
 
   handleSelect = item => {
     this.props.onSelect(item)
+    if (!this.props.isMultiSelect && this.props.closeOnSelect) {
+      this.props.close()
+    }
   }
 
   handleDeselect = item => {

src/select-menu/src/SelectMenu.js

@@ -105,7 +105,12 @@ export default class SelectMenu extends PureComponent {
      * Can be a function that returns a node, or a node itself, that is
      * rendered instead of the options list when there are no options.
      */
-    emptyView: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+    emptyView: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+
+    /*
+     * When true, menu closes on option selection.
+     */
+    closeOnSelect: PropTypes.bool
   }
 
   static defaultProps = {
@@ -116,7 +121,8 @@ export default class SelectMenu extends PureComponent {
     position: Position.BOTTOM_LEFT,
     isMultiSelect: false,
     filterPlaceholder: 'Filter...',
-    filterIcon: 'search'
+    filterIcon: 'search',
+    closeOnSelect: false
   }
 
   getDetailView = (close, detailView) => {
@@ -163,6 +169,7 @@ export default class SelectMenu extends PureComponent {
       emptyView,
       titleView,
       isMultiSelect,
+      closeOnSelect,
       ...props
     } = this.props
 
@@ -196,6 +203,7 @@ export default class SelectMenu extends PureComponent {
             close={close}
             {...this.getDetailView(close, detailView)}
             {...this.getEmptyView(close, emptyView)}
+            closeOnSelect={closeOnSelect}
           />
         )}
         {...props}

src/select-menu/src/SelectMenuContent.js

@@ -46,6 +46,11 @@ export default class SelectMenuContent extends PureComponent {
      */
     isMultiSelect: PropTypes.bool,
 
+    /*
+     * When true, menu closes on option selection.
+     */
+    closeOnSelect: PropTypes.bool,
+
     /**
      * Node that is placed in the header section, above the options.
      */
@@ -84,7 +89,8 @@ export default class SelectMenuContent extends PureComponent {
       titleView,
       detailView,
       emptyView,
-      isMultiSelect
+      isMultiSelect,
+      closeOnSelect
     } = this.props
 
     const headerHeight = 40
@@ -114,6 +120,7 @@ export default class SelectMenuContent extends PureComponent {
               options={options}
               isMultiSelect={isMultiSelect}
               close={close}
+              closeOnSelect={closeOnSelect}
               {...listProps}
             />
           )}

src/select-menu/stories/index.stories.js

@@ -28,6 +28,19 @@ storiesOf('select-menu', module).add('SelectMenu', () => (
         </SelectMenu>
       )}
     </Manager>
+    <Manager>
+      {({ setState, state }) => (
+        <SelectMenu
+          title="Select name"
+          options={options}
+          selected={state.selected}
+          onSelect={item => setState({ selected: item.value })}
+          closeOnSelect
+        >
+          <Button>Menu will close on select</Button>
+        </SelectMenu>
+      )}
+    </Manager>
     <Manager>
       {({ setState, state }) => (
         <Pane display="inline-block">