Make onClick select item from list

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -9,7 +9,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React, { Component } from 'react';
 import {Icon} from "../../../SLDSIcons";
-import {KEYS} from '../../../utils';
+import {KEYS,EventUtil} from '../../../utils';
 
 class Item extends React.Component {
   constructor(props) {
@@ -25,6 +25,15 @@ class Item extends React.Component {
     });
   }
 
+  handleClick(e){
+    e.preventDefault();
+    if(e.nativeEvent){
+      e.nativeEvent.preventDefault();
+      e.nativeEvent.stopImmediatePropagation();
+    }
+    return this.props.onSelect(this.props.index);
+  }
+
   render(){
     let className = 'slds-lookup__item';
 
@@ -33,6 +42,7 @@ class Item extends React.Component {
     if(this.props.isActive) styles = {backgroundColor: 'red'};
 
     return (
+      //IMPORTANT: id is used to set lookup's input's aria-activedescendant
       <li
         className={className}
         style={styles}
@@ -42,7 +52,8 @@ class Item extends React.Component {
           id={this.props.id}
           tabIndex="-1"
           aria-disabled={this.props.disabled}
-          role="option">
+          role="option"
+          onClick={this.handleClick.bind(this)}>
           <Icon name="account" />
           { this.boldSearchText(this.props.children) }
         </a>

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} isActive={isActive} searchTerm={this.props.searchTerm}>{c}</Item>
+      return <Item key={i} id={'item-' + i} index={i} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
     });
   }
 

components/SLDSLookup/index.jsx

@@ -25,13 +25,13 @@ class SLDSLookup extends React.Component {
     this.state = {
       searchTerm: '',
       isOpen:false,
-      selectedItem: null,
+      selectedIndex: null,
       activeIndex:null,
     };
   }
 
   //=================================================
-  // Set Active Descendant (currently focused/hovered item in list)
+  // Set Active Descendant (on key down/up, set currently focused/hovered item in list)
   increaseIndex(){
     this.setState({
       activeIndex: this.state.activeIndex <= this.props.items.length ? this.state.activeIndex + 1 : 0
@@ -44,6 +44,22 @@ class SLDSLookup extends React.Component {
     })
   }
 
+  getActiveDescendant(){
+    console.log("aria-activedescendant is ", 'item-' +  this.state.activeIndex);
+    return this.state.activeIndex !== null ? 'item-' + this.state.activeIndex: "";
+  }
+
+  //=================================================
+  // Select menu item (onClick or on key enter/space)
+  selectItem(index){
+    this.setState({
+      selectedIndex: index,
+      searchTerm: null
+    });
+    console.log("Selected Item is ", this.props.items[index]);
+  }
+
+
   //=================================================
   // Basic Event Listeners on Input
   handleClose() {
@@ -101,6 +117,7 @@ class SLDSLookup extends React.Component {
       return <Menu
         searchTerm={this.state.searchTerm}
         filterWith={this.props.filterWith}
+        onSelect={this.selectItem.bind(this)}
         label={this.props.label}
         items={this.props.items}
         activeIndex={this.state.activeIndex}/>;
@@ -125,7 +142,7 @@ class SLDSLookup extends React.Component {
               aria-label="lookup"
               aria-haspopup="true"
               aria-autocomplete="list"
-              aria-activedescendant={this.state.activeIndex !== null ? "item-" + this.state.activeIndex : ""}
+              aria-activedescendant={this.getActiveDescendant()}
               aria-expanded={this.state.isOpen}
               role="combobox"
               onChange={this.handleChange.bind(this)}