Fix lookup onKeyUp bug when Lookup has section headers. Update examples.

Author: donnieberg

components/SLDSLookup/Menu/DefaultSectionHeader/index.js

@@ -8,52 +8,38 @@
    */
 
 import React from 'react';
-import SLDSIcon from "../../../SLDSIcon";
 import { EventUtil } from '../../../utils';
 
 const displayName = "LookupDefaultSectionHeader";
-const propTypes = {};
-const defaultProps = {};
+const propTypes = {
+  data: React.PropTypes.object,
+  key: React.PropTypes.string
+
+};
 
 class DefaultSectionHeader extends React.Component {
   constructor(props) {
     super(props);
   }
 
-  componentWillReceiveProps(nextProps){
-    if(nextProps.isActive !== this.props.isActive && nextProps.isActive === true) {
-      this.props.setFocus('searchRecords');
-    }
-  }
-
-  handleClick(){
-    console.log('=====> Lookup Header Clicked');
-    if(this.props.onClose){
-      this.props.onClose();
-    }
-  }
-
   handleMouseDown(event) {
     EventUtil.trapImmediate(event);
   }
 
   render(){
     return (
-      <li className="slds-lookup__item"
+      <li className="slds-p-around--x-small"
         tabIndex="-1"
       >
-        <a href="javascript:void()" tabIndex="-1">
           <span className="slds-m-left--x-small">
             <strong>{this.props.data.label}</strong>
           </span>
-        </a>
       </li>
     )
   }
 }
 
 DefaultSectionHeader.displayName = displayName;
 DefaultSectionHeader.propTypes = propTypes;
-DefaultSectionHeader.defaultProps = defaultProps;
 
 module.exports = DefaultSectionHeader;

components/SLDSLookup/Menu/index.js

@@ -64,7 +64,7 @@ class Menu extends React.Component {
 
   filterEmptySections(items){
     const result = [];
-    items.forEach((item,index)=>{
+    items.forEach((item,index) => {
       if(item && item.data && item.data.type === 'section'){
         if(index+1<items.length){
           const nextItem = items[index+1];
@@ -113,7 +113,6 @@ class Menu extends React.Component {
         isActive = focusIndex === i  ? true : false;
       }
       if(c.data.type==='section'){
-//        focusIndex++;
         return <DefaultSectionHeader data={c.data} key={'section_header_'+i}/>;
       }
       return <Item

components/SLDSLookup/index.jsx

@@ -191,8 +191,9 @@ class SLDSLookup extends React.Component {
     let numFocusable = this.getNumFocusableItems();
     let prevFocusIndex = this.state.focusIndex > 0 ? this.state.focusIndex - 1 : numFocusable;
     const filteredItem = this.refs.menu.getFilteredItemForIndex(prevFocusIndex);
+    console.log('filteredItem', filteredItem);
     if(filteredItem && filteredItem.data.type === 'section'){
-      prevFocusIndex--;
+      prevFocusIndex === 0 ? prevFocusIndex = numFocusable : prevFocusIndex--;
     }
     this.setState({ focusIndex: prevFocusIndex});
   }

demo/code-snippets/LookupExamples3.js

@@ -5,11 +5,15 @@
   onChange={function(newValue){console.log("New search term: ", newValue)}}
   onSelect={function(item){console.log(item , " Selected")}}
   options={[
+    {type:'section', label:'SECTION 1'},
     {label: "Paddy\"s Pub"},
     {label: "Tyrell Corp"},
+    {type:'section', label:'SECTION 2'},
     {label: "Paper St. Soap Company"},
     {label: "Nakatomi Investments"},
     {label: "Acme Landscaping"},
+    {type:'section', label:'SECTION 3'},
     {label: "Acme Construction"}
   ]}
 />
+