added tab function

lib/Autocomplete.js

@@ -142,6 +142,10 @@ class Autocomplete extends React.Component {
      * `<input>` loses focus.
      */
     selectOnBlur: PropTypes.bool,
+    /**
+     * Whether or not to select the highlighted item on a 'Tab' keypress
+     */
+    selectOnTab: PropTypes.bool,
     /**
      * Arguments: `isOpen: Boolean`
      *
@@ -187,6 +191,7 @@ class Autocomplete extends React.Component {
     },
     autoHighlight: true,
     selectOnBlur: false,
+    selectOnTab: false,
     onMenuVisibilityChange() {},
   }
 
@@ -323,37 +328,7 @@ class Autocomplete extends React.Component {
     Enter(event) {
       // Key code 229 is used for selecting items from character selectors (Pinyin, Kana, etc)
       if (event.keyCode !== 13) return
-      // In case the user is currently hovering over the menu
-      this.setIgnoreBlur(false)
-      if (!this.isOpen()) {
-        // menu is closed so there is no selection to accept -> do nothing
-        return
-      }
-      else if (this.state.highlightedIndex == null) {
-        // input has focus but no menu item is selected + enter is hit -> close the menu, highlight whatever's in input
-        this.setState({
-          isOpen: false
-        }, () => {
-          this.refs.input.select()
-        })
-      }
-      else {
-        // text entered + menu item has been highlighted + enter is hit -> update value to that of selected menu item, close the menu
-        event.preventDefault()
-        const item = this.getFilteredItems(this.props)[this.state.highlightedIndex]
-        const value = this.props.getItemValue(item)
-        this.setState({
-          isOpen: false,
-          highlightedIndex: null
-        }, () => {
-          //this.refs.input.focus() // TODO: file issue
-          this.refs.input.setSelectionRange(
-            value.length,
-            value.length
-          )
-          this.props.onSelect(value, item)
-        })
-      }
+      this.handleKeyboardSelection(event)
     },
 
     Escape() {
@@ -365,12 +340,52 @@ class Autocomplete extends React.Component {
       })
     },
 
-    Tab() {
-      // In case the user is currently hovering over the menu
-      this.setIgnoreBlur(false)
+    Tab(event) {
+      if (this.props.selectOnTab) {
+        this.handleKeyboardSelection(event)
+      }
     },
   }
 
+  handleKeyboardSelection(event) {
+    // Destructure key value from event object for possible later use
+    const { key } = event
+    // In case the user is currently hovering over the menu
+    this.setIgnoreBlur(false)
+    if (!this.isOpen()) {
+      // menu is closed so there is no selection to accept -> do nothing
+      return
+    }
+    else if (this.state.highlightedIndex == null) {
+      // input has focus but no menu item is selected + Enter/Tab is hit -> close the menu, highlight whatever's in input
+      this.setState({
+        isOpen: false
+      }, () => {
+        this.refs.input.select()
+      })
+    }
+    else {
+      // text entered + menu item has been highlighted + Enter/Tab is hit -> update value to that of selected menu item, close the menu
+      if (key === 'Enter') {
+        // Prevent default on Enter, but we *do* want it on Tab events so user selection goes to next field if possible
+        event.preventDefault()
+      }
+      const item = this.getFilteredItems(this.props)[this.state.highlightedIndex]
+      const value = this.props.getItemValue(item)
+      this.setState({
+        isOpen: false,
+        highlightedIndex: null
+      }, () => {
+        //this.refs.input.focus() // TODO: file issue
+        this.refs.input.setSelectionRange(
+          value.length,
+          value.length
+        )
+        this.props.onSelect(value, item)
+      })
+    }
+  }
+
   getFilteredItems(props) {
     let items = props.items
 
@@ -598,4 +613,3 @@ class Autocomplete extends React.Component {
 }
 
 module.exports = Autocomplete
-