OnSelect for click works for filtered and nonfiltered lists. Bug in

keyboard interaction.

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -31,7 +31,7 @@ class Item extends React.Component {
       e.nativeEvent.preventDefault();
       e.nativeEvent.stopImmediatePropagation();
     }
-    return this.props.onSelect(this.props.index);
+    return this.props.onSelect(this.props.id);
   }
 
   render(){
@@ -57,7 +57,7 @@ class Item extends React.Component {
           onClick={this.handleClick.bind(this)}
           onMouseDown={this.handleClick.bind(this)}>
           <Icon name="account" />
-          { this.boldSearchText(this.props.children) }
+          { this.boldSearchText(this.props.children.label) }
         </a>
       </li>
     )

components/SLDSLookup/Menu/index.js

@@ -26,7 +26,7 @@ class Menu extends React.Component {
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
       const isActive = this.props.activeIndex === i ? true : false;
-      return <Item key={i} id={'item-' + i} index={i} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
+      return <Item key={c.id} id={c.id} index={i} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
     });
   }
 

components/SLDSLookup/index.jsx

@@ -22,6 +22,10 @@ const defaultFilter = (term, item) => {
 class SLDSLookup extends React.Component {
   constructor(props) {
     super(props);
+    this.props.items.map((item, index) => {
+      return item.id = 'item-' + index;
+    })
+
     this.state = {
       searchTerm: '',
       isOpen:false,
@@ -50,8 +54,9 @@ class SLDSLookup extends React.Component {
 
   //=================================================
   // Select menu item (onClick or on key enter/space)
-  selectItem(index){
+  selectItem(itemId){
     //console.log('selectItem fired');
+    let index = itemId.replace('item-', '');
     this.setState({
       selectedIndex: index,
       searchTerm: null
@@ -177,7 +182,7 @@ class SLDSLookup extends React.Component {
               role="combobox"
               onChange={this.handleChange.bind(this)}
               onFocus={this.handleFocus.bind(this)}
-              onBlur={this.handleBlur.bind(this)}
+              //onBlur={this.handleBlur.bind(this)}
               onClick={this.handleClick.bind(this)}
               onKeyDown={this.handleKeyDown.bind(this)}
               value={this.state.searchTerm} />