Fix focus on delete bug in lookup

Author: donnieberg

components/SLDSLookup/Menu/index.js

@@ -8,14 +8,13 @@
    */
 
 import React, { Component } from 'react';
-import {Icon} from "../../SLDSIcons";
-import {KEYS} from '../../utils';
 import Item from './Item';
+import {Icon} from "../../SLDSIcons";
 
 class Menu extends React.Component {
   constructor(props){
     super(props);
-    this.state = {};
+    this.state = {isEmpty: false};
   }
 
   componentDidUpdate(){
@@ -49,6 +48,26 @@ class Menu extends React.Component {
     });
   }
 
+  renderEmptyState(){
+    let className = 'slds-lookup__item';
+    return (
+      <li
+        className={className}
+        role="presentaion">
+        <a
+          href='#'
+          id='add-item'
+          tabIndex="-1"
+          role="option"
+          onClick={this.props.addItem}
+          onMouseDown={this.props.addItem}>
+        <Icon name="add" category="utility" size="x-small" className="slds-icon-text-default" />
+        New {this.props.type}
+        </a>
+      </li>
+    );
+  }
+
   render(){
     return (
       <div
@@ -59,6 +78,7 @@ class Menu extends React.Component {
       role="presentation"
       ref="list">
       {this.renderItems()}
+      {this.renderEmptyState()}
       </ul>
       </div>
     )

components/SLDSLookup/index.jsx

@@ -9,8 +9,7 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 
 import React, { Component } from 'react';
 import Menu from './Menu';
-import {InputIcon, ButtonIcon} from "./../SLDSIcons";
-import {Icon} from "../SLDSIcons";
+import {Icon, InputIcon, ButtonIcon} from "./../SLDSIcons";
 import {KEYS,EventUtil} from '../utils';
 import escapeRegExp from 'lodash.escaperegexp';
 
@@ -36,8 +35,10 @@ class SLDSLookup extends React.Component {
     };
   }
 
-  componentDidUpdate(){
-    React.findDOMNode(this.refs.lookup).focus();
+  componentDidUpdate(prevProps, prevState){
+    if(prevState.selectedIndex && !this.state.selectIndex){
+      if(this.refs.lookup) React.findDOMNode(this.refs.lookup).focus();
+    }
   }
 
   //=================================================
@@ -76,6 +77,7 @@ class SLDSLookup extends React.Component {
   handleDeleteSelected() {
     this.setState({
       selectedIndex: null,
+      isOpen: true,
     });
   }
 
@@ -147,7 +149,10 @@ class SLDSLookup extends React.Component {
         setFocus={this.setFocus.bind(this)}
         getListLength={this.getListLength.bind(this)}
         listLength={this.state.listLength}
-        focusIndex={this.state.focusIndex}/>;
+        focusIndex={this.state.focusIndex}
+        addItem={this.props.addItem}
+        type={this.props.type}
+        />;
     }else{
       return null;
     }

demo/pages/HomePage/LookupBaseSection.jsx

@@ -36,6 +36,10 @@ module.exports = React.createClass( {
     return {};
   },
 
+  addItem(){
+    alert('Add item clicked');
+  },
+
 
   render() {
     return (
@@ -53,7 +57,7 @@ module.exports = React.createClass( {
               </PrismCode>
 
               <div className="slds-p-vertical--large">
-                <SLDSLookup items={items} label="Contacts" />
+                <SLDSLookup items={items} label="Accounts" type="account" addItem={this.addItem} />
               </div>
 
             </div>