Add scroll handler to scroll through menu items when they are in focus

Author: donnieberg

components/SLDSLookup/Menu/Item/index.jsx

@@ -18,6 +18,7 @@ class Item extends React.Component {
 
   componentWillReceiveProps(nextProps){
     if(nextProps.isActive !== this.props.isActive && (nextProps.isActive === true)){
+      this.scrollFocus();
       this.props.setFocus(this.props.id);
     }
   }
@@ -40,6 +41,13 @@ class Item extends React.Component {
     return this.props.onSelect(this.props.id);
   }
 
+  scrollFocus(){
+    const height = React.findDOMNode(this).offsetHeight;
+    if(height && this.props.handleItemFocus){
+      this.props.handleItemFocus(this.props.index,height);
+    }
+  }
+
   render(){
     let className = 'slds-lookup__item';
     let id = this.props.id;
@@ -69,6 +77,7 @@ class Item extends React.Component {
 Item.propTypes = {
   id: React.PropTypes.string,
   setFocus: React.PropTypes.func,
+  scrollFocus: React.PropTypes.func,
   isActive: React.PropTypes.bool,
   onSelect: React.PropTypes.func,
   searchTerm: React.PropTypes.string,

components/SLDSLookup/Menu/index.js

@@ -27,20 +27,37 @@ class Menu extends React.Component {
     return this.props.filterWith(this.props.searchTerm, item);
   }
 
+  handleItemFocus (itemIndex, itemHeight) {
+    if(this.refs.list){
+      React.findDOMNode(this.refs.list).scrollTop = itemIndex * itemHeight;
+    }
+  }
+
   renderItems(){
     return this.props.items.filter(this.filter, this).map((c, i) => {
       //isActive means it is aria-activedescendant
       const isActive = this.props.focusIndex === i ? true : false;
-      return <Item key={c.id} id={c.id} setFocus={this.props.setFocus} isActive={isActive} onSelect={this.props.onSelect} searchTerm={this.props.searchTerm}>{c}</Item>
+      return <Item
+      key={c.id}
+      id={c.id}
+      index={i}
+      setFocus={this.props.setFocus}
+      isActive={isActive}
+      handleItemFocus={this.handleItemFocus.bind(this)}
+      onSelect={this.props.onSelect}
+      searchTerm={this.props.searchTerm}>{c}</Item>
     });
   }
 
   render(){
     return (
       <div
       className="ignore-react-onclickoutside slds-lookup__menu"
-      role="listbox">
-      <ul className="slds-lookup__list" role="presentation" ref="list">
+      role="listbox"
+      ref="scroll">
+      <ul className="slds-lookup__list"
+      role="presentation"
+      ref="list">
       {this.renderItems()}
       </ul>
       </div>

components/SLDSPicklistBase/list.jsx

@@ -71,7 +71,7 @@ module.exports = React.createClass({
       newHighlightedIndex = this.props.options.length - 1;
     }
     else if(newHighlightedIndex >= this.props.options.length){
-      newHighlightedIndex = 0; 
+      newHighlightedIndex = 0;
     }
     if(this.props.onUpdateHighlighted){
       this.props.onUpdateHighlighted(newHighlightedIndex);
@@ -125,17 +125,17 @@ module.exports = React.createClass({
   getItems () {
     return this.props.options.map((option, index) =>{
       return (
-        <ListItem 
+        <ListItem
           key={index}
-          index={index} 
+          index={index}
           label={option.label}
-          value={option.value} 
+          value={option.value}
           isHighlighted={(index===this.props.highlightedIndex)}
-          isSelected={(index===this.props.selectedIndex)} 
-          onUpdateHighlighted={this.handleUpdateHighlighted} 
+          isSelected={(index===this.props.selectedIndex)}
+          onUpdateHighlighted={this.handleUpdateHighlighted}
           onMoveFocus={this.handleMoveFocus}
           onBlur={this.handleListItemBlur}
-          onFocus={this.handleItemFocus} 
+          onFocus={this.handleItemFocus}
           onSelect={this.handleSelect}
           onSearch={this.handleSearch}
           onCancel={this.handleCancel}/>
@@ -145,17 +145,17 @@ module.exports = React.createClass({
 
   render () {
     return (
-      <div 
+      <div
         ref="scroll"
         className={'slds-wrap slds-grow slds-scrollable--y '+this.props.className}
         style={{
           maxHeight:260
         }}
         >
-        <ul 
+        <ul
           ref="scroll"
           className={"slds-dropdown__list slds-theme--"+this.props.theme}
-          role="menu" 
+          role="menu"
           aria-labelledby={this.props.label}>
           { this.getItems() }
         </ul>