diff --git a/components/SLDSLookup/Menu/Item/index.jsx b/components/SLDSLookup/Menu/Item/index.jsx
index 3b7f8a60c7..9843547f10 100644
--- a/components/SLDSLookup/Menu/Item/index.jsx
+++ b/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,
diff --git a/components/SLDSLookup/Menu/index.js b/components/SLDSLookup/Menu/index.js
index 3d6844ec6b..ab5e7a8b90 100644
--- a/components/SLDSLookup/Menu/index.js
+++ b/components/SLDSLookup/Menu/index.js
@@ -27,11 +27,25 @@ 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