resolve #48

techniq · Aug 18, 2018 · dc12ca7 · dc12ca7
1 parent 1fa2fb2
commit dc12ca7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/index.js b/src/index.js
@@ -45,7 +45,12 @@ class MuiDownshift extends Component {
               focusOnClear={focusOnClear}
               loading={loading}
               downshiftProps={downshiftProps}
-              inputRef={node => (this.inputRef = node)}
+              inputRef={node => {
+                this.inputRef = node;
+                if (this.props.inputRef && typeof this.props.inputRef === 'function') {
+                  this.props.inputRef(node);
+                }
+              }}
             />
 
             <Menu
@@ -85,6 +90,7 @@ MuiDownshift.defaultProps = {
     ) : null; // TODO: should we handle this or require user to implement `getListItem` at this point (`includeFooter` or an array of null/undefined)?
   },
   menuItemCount: 5,
+  inputRef: undefined,
 };
 
 MuiDownshift.propTypes = {
@@ -97,6 +103,7 @@ MuiDownshift.propTypes = {
   getInputProps: PropTypes.func,
   focusOnClear: PropTypes.bool,
   loading: PropTypes.bool,
+  inputRef: PropTypes.func,
 
   // Menu
   getListItem: PropTypes.func,

diff --git a/stories/basic.js b/stories/basic.js
@@ -80,6 +80,16 @@ storiesOf('Input', module)
       focusOnClear
       onChange={action('onChange')}
     />
+  ))
+  .add('blurOnSelect (using inputRef)', () => (
+    <StarWarsSelect
+      getInputProps={({ openMenu }) => ({
+        label: 'Star Wars character',
+        placeholder: 'Choose wisely',
+      })}
+      blurOnSelect
+      onChange={action('onChange')}
+    />
   ));
 
 storiesOf('List item', module)

diff --git a/stories/components/StarWarsSelect.js b/stories/components/StarWarsSelect.js
@@ -1,10 +1,15 @@
 import React, { Component } from 'react';
 import { all as starwarsNames } from 'starwars-names';
 import MuiDownshift from '../../src';
+import PropTypes from 'prop-types';
 
 const items = starwarsNames.map((label, value) => ({ label, value }));
 
-export default class StarWarsSelect extends Component {
+class StarWarsSelect extends Component {
+  static defaultProps = {
+    blurOnSelect: false,
+  };
+
   state = {
     filteredItems: items,
   };
@@ -14,6 +19,9 @@ export default class StarWarsSelect extends Component {
       const filteredItems = items.filter(item => item.label.toLowerCase().includes(changes.inputValue.toLowerCase()));
       this.setState({ filteredItems });
     }
+    if (this.input && this.props.blurOnSelect) {
+      this.input.blur();
+    }
   };
 
   render() {
@@ -25,7 +33,16 @@ export default class StarWarsSelect extends Component {
         // getListItemKey={rowIndex => filteredItems[rowIndex].value}
         // keyMapper={rowIndex => filteredItems[rowIndex] && filteredItems[rowIndex].label}
         {...this.props}
+        inputRef={node => {
+          this.input = node;
+        }}
       />
     );
   }
 }
+
+StarWarsSelect.propTypes = {
+  blurOnSelect: PropTypes.bool,
+};
+
+export default StarWarsSelect;