FocusZone: restore focus on removing item.

common/changes/@uifabric/utilities/focuszone_2019-01-28-05-01.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Adding helper functions to get and restore focus elements based on index paths.",
+      "packageName": "@uifabric/utilities",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "dzearing@microsoft.com"
+}

common/changes/office-ui-fabric-react/focuszone_2019-01-28-05-01.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "FocusZone: focus can now be recovered if focus was resting within the zone but the element was removed.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts

@@ -1247,6 +1247,8 @@ class FocusZone extends BaseComponent<IFocusZoneProps, {}>, implements IFocusZon
   // (undocumented)
   componentDidMount(): void;
   // (undocumented)
+  componentDidUpdate(): void;
+  // (undocumented)
   componentWillUnmount(): void;
   // (undocumented)
   static defaultProps: IFocusZoneProps;
@@ -1352,6 +1354,9 @@ export function getDistanceBetweenPoints(point1: IPoint, point2: IPoint): number
 // @public
 export function getDocument(rootElement?: HTMLElement | null): Document | undefined;
 
+// @public
+export function getElementIndexPath(fromElement: HTMLElement, toElement: HTMLElement): number[];
+
 // @public
 export function getFadedOverflowStyle(theme: ITheme, color?: keyof ISemanticColors | keyof IPalette, direction?: 'horizontal' | 'vertical', width?: string | number, height?: string | number): IRawStyle;
 
@@ -1361,6 +1366,9 @@ export function getFirstFocusable(rootElement: HTMLElement, currentElement: HTML
 // @public
 export function getFirstTabbable(rootElement: HTMLElement, currentElement: HTMLElement, includeElementsInFocusZones?: boolean): HTMLElement | null;
 
+// @public
+export function getFocusableByIndexPath(parent: HTMLElement, path: number[]): HTMLElement | undefined;
+
 // @public
 export function getFocusStyle(theme: ITheme, inset?: number, position?: 'relative' | 'absolute', highContrastStyle?: IRawStyle | undefined, borderColor?: string, outlineColor?: string, isFocusedOnly?: boolean): IRawStyle;
 

packages/office-ui-fabric-react/package.json

@@ -45,6 +45,7 @@
     "@uifabric/jest-serializer-merge-styles": ">=6.0.7 <7.0.0",
     "@uifabric/prettier-rules": ">=1.0.0 <2.0.0",
     "@uifabric/tslint-rules": ">=1.0.0 <2.0.0",
+    "@uifabric/test-utilities": ">=6.0.0 <7.0.0",
     "@uifabric/webpack-utils": ">=0.7.4 <1.0.0",
     "enzyme": "^3.4.1",
     "enzyme-adapter-react-16": "^1.2.0",
@@ -76,4 +77,4 @@
     "react": ">=16.3.2-0 <17.0.0",
     "react-dom": ">=16.3.2-0 <17.0.0"
   }
-}
+}

packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx

@@ -92,7 +92,6 @@ describe('FocusTrapZone', () => {
   beforeEach(() => {
     lastFocusedElement = undefined;
   });
-
   describe('Tab and shift-tab wrap at extreme ends of the FTZ', () => {
     it('can tab across FocusZones with different button structures', async () => {
       expect.assertions(3);

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx

@@ -1,14 +1,23 @@
 import * as React from 'react';
-
 import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { setRTL, KeyCodes } from '../../Utilities';
-
 import { FocusZone } from './FocusZone';
 import { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';
 
+// tslint:disable:typedef
+
 describe('FocusZone', () => {
   let lastFocusedElement: HTMLElement | undefined;
+  let host: HTMLElement;
+
+  afterEach(() => {
+    if (host) {
+      ReactDOM.unmountComponentAtNode(host);
+      (host as any) = undefined;
+    }
+  });
+
   function _onFocus(ev: any): void {
     lastFocusedElement = ev.target;
   }
@@ -143,6 +152,159 @@ describe('FocusZone', () => {
     expect(lastFocusedElement).toBe(buttonC);
   });
 
+  it('can restore focus to the following item when item removed', () => {
+    host = document.createElement('div');
+
+    // Render component.
+    ReactDOM.render(
+      <FocusZone>
+        <button key="a" id="a" data-is-visible="true">
+          button a
+        </button>
+        <button key="b" id="b" data-is-visible="true">
+          button b
+        </button>
+        <button key="c" id="c" data-is-visible="true">
+          button c
+        </button>
+      </FocusZone>,
+      host
+    );
+
+    const buttonB = host.querySelector('#b') as HTMLElement;
+
+    buttonB.focus();
+
+    // Render component without button A.
+    ReactDOM.render(
+      <FocusZone>
+        <button key="a" id="a" data-is-visible="true">
+          button a
+        </button>
+        <button key="c" id="c" data-is-visible="true">
+          button c
+        </button>
+      </FocusZone>,
+      host
+    );
+
+    expect(document.activeElement).toBe(host.querySelector('#c'));
+  });
+
+  it('can restore focus to the previous item when end item removed', () => {
+    host = document.createElement('div');
+
+    // Render component.
+    ReactDOM.render(
+      <FocusZone>
+        <button key="a" id="a" data-is-visible="true">
+          button a
+        </button>
+        <button key="b" id="b" data-is-visible="true">
+          button b
+        </button>
+        <button key="c" id="c" data-is-visible="true">
+          button c
+        </button>
+      </FocusZone>,
+      host
+    );
+
+    const buttonC = host.querySelector('#c') as HTMLElement;
+
+    buttonC.focus();
+
+    // Render component without button A.
+    ReactDOM.render(
+      <FocusZone>
+        <button key="a" id="a" data-is-visible="true">
+          button a
+        </button>
+        <button key="b" id="b" data-is-visible="true">
+          button b
+        </button>
+      </FocusZone>,
+      host
+    );
+
+    expect(document.activeElement).toBe(host.querySelector('#b'));
+  });
+
+  describe('parking and unparking', () => {
+    let buttonA: HTMLElement;
+
+    beforeEach(() => {
+      host = document.createElement('div');
+
+      // Render component.
+      ReactDOM.render(
+        <div>
+          <button key="z" id="z" data-is-visible="true" />
+          <FocusZone id="fz">
+            <button key="a" id="a" data-is-visible="true">
+              button a
+            </button>
+          </FocusZone>
+        </div>,
+        host
+      );
+      buttonA = host.querySelector('#a') as HTMLElement;
+      buttonA.focus();
+
+      // Render component without button A.
+      ReactDOM.render(
+        <div>
+          <button key="z" id="z" data-is-visible="true" />
+          <FocusZone id="fz" />
+        </div>,
+        host
+      );
+    });
+
+    it('can move focus to container when last item removed', () => {
+      expect(document.activeElement).toBe(host.querySelector('#fz'));
+    });
+
+    it('can move focus from container to first item when added', () => {
+      ReactDOM.render(
+        <div>
+          <button key="z" id="z" />
+          <FocusZone id="fz">
+            <button key="a" id="a" data-is-visible="true">
+              button a
+            </button>
+          </FocusZone>
+        </div>,
+        host
+      );
+      expect(document.activeElement).toBe(host.querySelector('#a'));
+    });
+
+    it('removes focusability when moving from focused container', () => {
+      expect(host.querySelector('#fz')!.getAttribute('tabindex')).toEqual('-1');
+      (host.querySelector('#z') as HTMLElement).focus();
+      expect(host.querySelector('#fz')!.getAttribute('tabindex')).toBeNull();
+    });
+
+    it('does not move focus when items added without container focus', () => {
+      expect(host.querySelector('#fz')!.getAttribute('tabindex')).toEqual('-1');
+      (host.querySelector('#z') as HTMLElement).focus();
+
+      ReactDOM.render(
+        <div>
+          <button key="z" id="z" />
+          <FocusZone id="fz">
+            <button key="a" id="a" data-is-visible="true">
+              button a
+            </button>
+          </FocusZone>
+        </div>,
+        host
+      );
+      expect(document.activeElement).toBe(host.querySelector('#z'));
+    });
+  });
+
   it('can ignore arrowing if default is prevented', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <div {...{ onFocusCapture: _onFocus }}>