fix mouse focus issue with optionIndexes

Author: Jake Teton-Landis

lib/combobox.js

@@ -115,7 +115,8 @@ module.exports = React.createClass({
       props.onClick = this.selectOption.bind(this, child);
       props.onFocus = this.handleOptionFocus;
       props.onKeyDown = this.handleOptionKeyDown.bind(this, child);
-      props.onMouseEnter = this.handleOptionMouseEnter.bind(this, index);
+      props.onMouseEnter = this.handleOptionMouseEnter.bind(
+        this, optionIndexes.length - 1);
     }.bind(this));
     return {
       optionIndexes: optionIndexes,
@@ -311,20 +312,23 @@ module.exports = React.createClass({
 
   focusPrevious: function() {
     if (this.state.menu.isEmpty) return;
-    var last = this.props.children.length - 1;
+    var last = this.state.menu.optionIndexes.length - 1;
     var index = this.state.focusedIndex == null ?
       last : this.state.focusedIndex - 1;
     this.focusOptionAtIndex(index);
   },
 
   focusSelectedOption: function() {
+    // we have to do two hops to go from the DOM index to option index
     var selectedDomIndex;
+
+    // hop 1: dom index
     React.Children.forEach(this.props.children, function(child, index) {
       if (child.props.value === this.state.value)
         selectedDomIndex = index;
     }.bind(this));
 
-    // find the option index
+    // hop 2: option index
     var selectedOptionIndex;
     this.state.menu.optionIndexes.forEach(function(domIndex, optIndex) {
       if (domIndex === selectedDomIndex) selectedOptionIndex = optIndex;
@@ -347,6 +351,8 @@ module.exports = React.createClass({
     return inputValue || value;
   },
 
+  // index is the index of the option among the list of only options,
+  // NOT among all elements in the DOM
   focusOptionAtIndex: function(index) {
     if (!this.state.isOpen && this.state.value)
       return this.focusSelectedOption();