Make onSelect work with enter/space key

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -16,6 +16,12 @@ class Item extends React.Component {
     super(props);
   }
 
+  componentWillReceiveProps(nextProps){
+    if(nextProps.isActive !== this.props.isActive){
+      this.props.setActiveDescendant(nextProps.id);
+    }
+  }
+
   boldSearchText(children) {
     const term = this.props.searchTerm;
     if(!children || !term) return children;
@@ -38,10 +44,10 @@ class Item extends React.Component {
     let className = 'slds-lookup__item';
 
     //TODO: make isActive styles into a class??
+    let id = this.props.id;
     let styles = {};
     if(this.props.isActive) className += ' slds-theme--shade';
 
-
     return (
       //IMPORTANT: id is used to set lookup's input's aria-activedescendant
       <li
@@ -50,7 +56,7 @@ class Item extends React.Component {
         role="presentaion">
         <a
           href={this.props.href}
-          id={this.props.id}
+          id={id}
           tabIndex="-1"
           aria-disabled={this.props.disabled}
           role="option"

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

components/SLDSLookup/index.jsx

@@ -29,6 +29,7 @@ class SLDSLookup extends React.Component {
     this.state = {
       searchTerm: '',
       isOpen:false,
+      activeItem:null,
       selectedIndex: null,
       activeIndex:null,
     };
@@ -48,8 +49,8 @@ class SLDSLookup extends React.Component {
     })
   }
 
-  getActiveDescendant(){
-    return this.state.activeIndex !== null ? 'item-' + this.state.activeIndex: "";
+  setActiveDescendant(id){
+    this.setState({activeItem:id});
   }
 
   //=================================================
@@ -120,7 +121,7 @@ class SLDSLookup extends React.Component {
       //If user hits enter/space key, select current activedescendant item
       else if((event.keyCode === KEYS.ENTER || event.keyCode === KEYS.SPACE) && this.state.activeIndex !== null){
         EventUtil.trapImmediate(event);
-        this.selectItem(this.state.activeIndex);
+        this.selectItem(this.state.activeItem);
       }
     }
   }
@@ -135,6 +136,7 @@ class SLDSLookup extends React.Component {
         onSelect={this.selectItem.bind(this)}
         label={this.props.label}
         items={this.props.items}
+        setActiveDescendant={this.setActiveDescendant.bind(this)}
         activeIndex={this.state.activeIndex}/>;
     }else{
       return null;
@@ -177,12 +179,12 @@ class SLDSLookup extends React.Component {
               aria-label="lookup"
               aria-haspopup="true"
               aria-autocomplete="list"
-              aria-activedescendant={this.getActiveDescendant()}
+              aria-activedescendant={this.state.activeItem ? this.state.activeItem:""}
               aria-expanded={this.state.isOpen}
               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} />