diff --git a/common/changes/office-ui-fabric-react/magellan-detailsListRowFocus_2018-01-31-23-40.json b/common/changes/office-ui-fabric-react/magellan-detailsListRowFocus_2018-01-31-23-40.json
new file mode 100644
index 00000000000000..f40b21e935a3b4
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/magellan-detailsListRowFocus_2018-01-31-23-40.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "[Focus] Enable focus forceIntoFirstElement parameter",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "law@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx
new file mode 100644
index 00000000000000..ff04576a4f4e89
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import * as ReactTestUtils from 'react-dom/test-utils';
+import { mount } from 'enzyme';
+
+import {
+  DetailsList
+} from './DetailsList';
+
+import {
+  IDetailsList,
+  IColumn
+} from './DetailsList.types';
+
+// Populate mock items for testing
+function mockItems(count: number): any {
+  const items = [];
+
+  for (let i = 0; i < count; i++) {
+    items.push({
+      key: i,
+      name: 'Item ' + i,
+      value: i
+    });
+  }
+
+  return items;
+}
+
+describe('DetailsList', () => {
+  it('renders List correctly', () => {
+    DetailsList.prototype.componentDidMount = jest.fn();
+
+    const component = renderer.create(
+      <DetailsList
+        items={ mockItems(5) }
+        // tslint:disable-next-line:jsx-no-lambda
+        onRenderRow={ () => null }
+        skipViewportMeasures={ true }
+        // tslint:disable-next-line:jsx-no-lambda
+        onShouldVirtualize={ () => false }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('focuses row by index', () => {
+    jest.useFakeTimers();
+
+    let component: any;
+    const wrapper = mount(
+      <DetailsList
+        items={ mockItems(5) }
+        // tslint:disable-next-line:jsx-no-lambda
+        componentRef={ ref => component = ref }
+        skipViewportMeasures={ true }
+        // tslint:disable-next-line:jsx-no-lambda
+        onShouldVirtualize={ () => false }
+      />);
+
+    expect(component).toBeDefined();
+    (component as IDetailsList).focusIndex(2);
+    setTimeout(() => {
+      expect(document.activeElement.className.split(' ')).toContain('ms-DetailsRow');
+      expect(document.activeElement.textContent).toEqual('2');
+    }, 0);
+    jest.runOnlyPendingTimers();
+  });
+
+  it('focuses into row element', () => {
+    const onRenderColumn = (item: any, index: number, column: IColumn) => {
+      let value = (item && column && column.fieldName) ? item[column.fieldName] : '';
+      if (value === null || value === undefined) {
+        value = '';
+      }
+      console.log('Rendered column');
+      return (
+        <div className={ 'test-column' } data-is-focusable={ true } >
+          { value }
+        </div>
+      );
+    };
+
+    jest.useFakeTimers();
+
+    let component: any;
+    const wrapper = mount(
+      <DetailsList
+        items={ mockItems(5) }
+        // tslint:disable-next-line:jsx-no-lambda
+        componentRef={ ref => component = ref }
+        skipViewportMeasures={ true }
+        // tslint:disable-next-line:jsx-no-lambda
+        onShouldVirtualize={ () => false }
+        onRenderItemColumn={ onRenderColumn }
+      />);
+
+    expect(component).toBeDefined();
+    (component as IDetailsList).focusIndex(2);
+    setTimeout(() => {
+      expect(document.activeElement.className.split(' ')).toContain('ms-DetailsRow');
+      expect(document.activeElement.textContent).toEqual('2');
+    }, 0);
+    jest.runOnlyPendingTimers();
+
+    (component as IDetailsList).focusIndex(2, true);
+    setTimeout(() => {
+      expect(document.activeElement.className.split(' ')).toContain('test-column');
+      expect(document.activeElement.textContent).toEqual('2');
+    }, 0);
+    jest.runOnlyPendingTimers();
+  });
+});
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index df241e22f95cfc..7e0dc127b7b714 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -131,6 +131,23 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     this._groupedList && this._groupedList.scrollToIndex(index, measureItem);
   }
 
+  public focusIndex(
+    index: number,
+    forceIntoFirstElement: boolean = false,
+    measureItem?: (itemIndex: number) => number): void {
+
+    const item = this.props.items[index];
+    if (item) {
+      this.scrollToIndex(index, measureItem);
+
+      const itemKey = this._getItemKey(item, index);
+      const row = this._activeRows[itemKey];
+      if (row) {
+        this._setFocusToRow(row, forceIntoFirstElement);
+      }
+    }
+  }
+
   public componentWillUnmount() {
     if (this._dragDropHelper) {
       this._dragDropHelper.dispose();
@@ -537,12 +554,12 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  private _setFocusToRow(row: DetailsRow) {
+  private _setFocusToRow(row: DetailsRow, forceIntoFirstElement: boolean = false) {
     if (this._selectionZone) {
       this._selectionZone.ignoreNextFocus();
     }
     this._async.setTimeout(() => {
-      row.focus();
+      row.focus(forceIntoFirstElement);
     }, 0);
   }
 
@@ -679,7 +696,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     let totalWidth = 0; // offset because we have one less inner padding.
     const availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
     const adjustedColumns: IColumn[] = newColumns.map((column, i) => {
-    const newColumn = assign(
+      const newColumn = assign(
         {},
         column,
         {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
index f370f567e8a309..9ae30253e17580 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
@@ -27,6 +27,16 @@ export interface IDetailsList extends IList {
    * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.
    */
   forceUpdate: () => void;
+
+  /**
+   * Scroll to and focus the item at the given index. focusIndex will call scrollToIndex on the specified index.
+   *
+   * @param index Index of item to scroll to
+   * @param forceIntoFirstElement If true, focus will be set to the first focusable child element of the item rather
+   *  than the item itself.
+   * @param measureItem Optional callback to measure the height of an individual item
+   */
+  focusIndex: (index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number) => void;
 }
 
 export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewportProps {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 064c80759e8a49..05e097ffd328a0 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -309,8 +309,8 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     });
   }
 
-  public focus(): boolean {
-    return !!this._focusZone && this._focusZone.focus();
+  public focus(forceIntoFirstElement: boolean = false): boolean {
+    return !!this._focusZone && this._focusZone.focus(forceIntoFirstElement);
   }
 
   protected _onRenderCheck(props: IDetailsRowCheckProps) {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index 1cf78c17c1931f..70c8adc0cc08a9 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -91,5 +91,4 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
 
     return value;
   }
-
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
new file mode 100644
index 00000000000000..3781b2dbc69d23
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -0,0 +1,222 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailsList renders List correctly 1`] = `
+<div
+  className="ms-Viewport"
+  style={
+    Object {
+      "minHeight": 1,
+      "minWidth": 1,
+    }
+  }
+>
+  <div
+    aria-label={undefined}
+    className="ms-DetailsList is-horizontalConstrained undefined"
+    data-automationid="DetailsList"
+    data-is-scrollable="false"
+  >
+    <div
+      aria-colcount={2}
+      aria-label={undefined}
+      aria-readonly="true"
+      aria-rowcount={6}
+      role="grid"
+    >
+      <div
+        onKeyDown={[Function]}
+        role="presentation"
+      >
+        <div
+          aria-describedby={undefined}
+          aria-label={undefined}
+          aria-labelledby={undefined}
+          className="ms-FocusZone ms-DetailsHeader"
+          data-automationid="DetailsHeader"
+          data-focuszone-id="FocusZone1"
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDownCapture={[Function]}
+          onMouseMove={[Function]}
+          role="row"
+        >
+          <div
+            aria-colindex={0}
+            aria-labelledby="header0-check"
+            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            onClick={[Function]}
+            role="columnheader"
+          >
+            <span
+              className=""
+            >
+              <div
+                aria-checked={undefined}
+                aria-describedby="header0-checkTooltip"
+                aria-label={undefined}
+                className="ms-DetailsRow-check ms-DetailsRow-check--isHeader undefined"
+                data-automationid="DetailsRowCheck"
+                data-is-focusable={true}
+                data-selection-toggle={true}
+                id="header0-check"
+                role="checkbox"
+              >
+                <div
+                  className="ms-Check"
+                >
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Check-circle
+                        undefined
+                        {
+                          display: inline-block;
+                        }
+                    data-icon-name="CircleRing"
+                    role="presentation"
+                  />
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Check-check
+                        undefined
+                        {
+                          display: inline-block;
+                        }
+                    data-icon-name="StatusCircleCheckmark"
+                    role="presentation"
+                  />
+                </div>
+              </div>
+            </span>
+          </div>
+          <div
+            aria-colindex={1}
+            aria-disabled={false}
+            aria-sort="none"
+            className="ms-DetailsHeader-cell is-actionable undefined"
+            data-automationid="ColumnsHeaderColumn"
+            data-item-key="key"
+            role="columnheader"
+            style={
+              Object {
+                "width": 116,
+              }
+            }
+          >
+            <span
+              className=""
+            >
+              <span
+                aria-describedby="header0-key-tooltip"
+                aria-haspopup={false}
+                aria-label={undefined}
+                aria-labelledby="header0-key-name "
+                className="ms-DetailsHeader-cellTitle"
+                data-is-focusable={true}
+                id="header0-key"
+                onClick={[Function]}
+                onContextMenu={[Function]}
+                role="button"
+              >
+                <span
+                  className="ms-DetailsHeader-cellName"
+                  id="header0-key-name"
+                >
+                  key
+                </span>
+              </span>
+            </span>
+          </div>
+          <div
+            aria-hidden={true}
+            className="ms-DetailsHeader-cellSizer"
+            data-is-focusable={false}
+            data-sizer-index={0}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDoubleClick={[Function]}
+            role="button"
+          />
+        </div>
+      </div>
+      <div
+        onKeyDown={[Function]}
+        role="presentation"
+      >
+        <div
+          aria-describedby={undefined}
+          aria-labelledby={undefined}
+          className="ms-FocusZone"
+          data-focuszone-id="FocusZone2"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDownCapture={[Function]}
+          role="presentation"
+        >
+          <div
+            className="ms-SelectionZone"
+            onClick={[Function]}
+            onContextMenu={[Function]}
+            onDoubleClick={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onKeyDownCapture={[Function]}
+            onMouseDown={[Function]}
+            onMouseDownCapture={[Function]}
+            role="presentation"
+          >
+            <div
+              className="ms-List"
+              role="presentation"
+            >
+              <div
+                className="ms-List-surface"
+                role="presentation"
+              >
+                <div
+                  className="ms-List-page"
+                  role="presentation"
+                  style={Object {}}
+                >
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={0}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={1}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={2}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={3}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={4}
+                    role="presentation"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
new file mode 100644
index 00000000000000..45b51547ae8026
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
@@ -0,0 +1,18 @@
+@import '../../../common/common';
+
+:global {
+  .DetailsList-grouped-example {
+    .ms-DetailsList {
+      max-height: 500px;
+      overflow-y: scroll;
+
+      .ms-DetailsRow-cell {
+        padding: 0px;
+      }
+
+      .grouped-example-column {
+        padding: 11px 8px;
+      }
+    }
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx
index 4bd594fa936f14..7ecbe0e9dd3d80 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx
@@ -1,9 +1,14 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
+import {
+  BaseComponent,
+  autobind
+} from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
+import { DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
+import './DetailsList.Grouped.Example.scss';
 
 const _columns = [
   {
@@ -50,9 +55,11 @@ const _items = [
   }
 ];
 
-export class DetailsListGroupedExample extends React.Component<{}, {
+export class DetailsListGroupedExample extends BaseComponent<{}, {
   items: {}[];
 }> {
+  private _root: DetailsList;
+
   constructor(props: {}) {
     super(props);
 
@@ -65,12 +72,13 @@ export class DetailsListGroupedExample extends React.Component<{}, {
     const { items } = this.state;
 
     return (
-      <Fabric className='foo'>
+      <Fabric className='DetailsList-grouped-example'>
         <DefaultButton
           onClick={ this._addItem }
           text='Add an item'
         />
         <DetailsList
+          componentRef={ this._resolveRef('_root') }
           items={ items }
           groups={ [
             {
@@ -89,7 +97,7 @@ export class DetailsListGroupedExample extends React.Component<{}, {
               key: 'groupblue2',
               name: 'By "blue"',
               startIndex: 2,
-              count: 3
+              count: items.length - 2
             }
           ] }
           columns={ _columns }
@@ -98,11 +106,13 @@ export class DetailsListGroupedExample extends React.Component<{}, {
           groupProps={ {
             showEmptyGroups: true
           } }
+          onRenderItemColumn={ this._onRenderColumn }
         />
       </Fabric>
     );
   }
 
+  @autobind
   private _addItem() {
     const items = this.state.items;
 
@@ -112,7 +122,25 @@ export class DetailsListGroupedExample extends React.Component<{}, {
         name: 'New item ' + items.length,
         color: 'blue'
       }])
+    }, () => {
+      this._root.focusIndex(items.length, true);
     });
   }
 
+  private _onRenderColumn(item: any, index: number, column: IColumn) {
+    let value = (item && column && column.fieldName) ? item[column.fieldName] : '';
+
+    if (value === null || value === undefined) {
+      value = '';
+    }
+
+    return (
+      <div
+        className={ 'grouped-example-column' }
+        data-is-focusable={ true }
+      >
+        { value }
+      </div>
+    );
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/List/List.tsx b/packages/office-ui-fabric-react/src/components/List/List.tsx
index e09da24fb18831..bbf4170f2f07ac 100644
--- a/packages/office-ui-fabric-react/src/components/List/List.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/List.tsx
@@ -266,7 +266,9 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     this._scrollElement = findScrollableParent(this._root) as HTMLElement;
 
     this._events.on(window, 'resize', this._onAsyncResize);
-    this._events.on(this._root, 'focus', this._onFocus, true);
+    if (this._root) {
+      this._events.on(this._root, 'focus', this._onFocus, true);
+    }
     if (this._scrollElement) {
       this._events.on(this._scrollElement, 'scroll', this._onScroll);
       this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);