asyncFocus: component.focus should work

common/changes/@uifabric/utilities/asyncfocusfix_2018-03-30-23-55.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "asyncFocus: passing a component which has a focus method, but no `ownerDocument`, should still call focus.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "dzearing@microsoft.com"
+}

packages/utilities/src/focus.test.tsx

@@ -141,7 +141,6 @@ describe('focusAsync', () => {
     );
 
     const container = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
-
     const buttonA = container.querySelector('.a') as HTMLElement;
     const buttonB = container.querySelector('.b') as HTMLElement;
     const buttonC = container.querySelector('.c') as HTMLElement;
@@ -161,4 +160,15 @@ describe('focusAsync', () => {
 
     jest.runAllTimers();
   });
+
+  it('can focus a component which implements focus()', () => {
+    let calledFocus = false;
+    const fakeComponent = {
+      focus: () => calledFocus = true
+    };
+
+    focusAsync(fakeComponent);
+    jest.runAllTimers();
+    expect(calledFocus).toEqual(true);
+  });
 });

packages/utilities/src/focus.ts

@@ -352,15 +352,15 @@ export function shouldWrapFocus(element: HTMLElement, noWrapDataAttribute: 'data
   return elementContainsAttribute(element, noWrapDataAttribute) === 'true' ? false : true;
 }
 
-let targetToFocusOnNextRepaint: HTMLElement | null | undefined = undefined;
+let targetToFocusOnNextRepaint: HTMLElement | { focus: () => void } | null | undefined = undefined;
 
 /**
  * Sets focus to an element asynchronously. The focus will be set at the next browser repaint,
  * meaning it won't cause any extra recalculations. If more than one focusAsync is called during one frame,
  * only the latest called focusAsync element will actually be focused
  * @param element The element to focus
  */
-export function focusAsync(element: HTMLElement | undefined | null): void {
+export function focusAsync(element: HTMLElement | { focus: () => void } | undefined | null): void {
   if (element) {
     // An element was already queued to be focused, so replace that one with the new element
     if (targetToFocusOnNextRepaint) {
@@ -370,8 +370,14 @@ export function focusAsync(element: HTMLElement | undefined | null): void {
 
     targetToFocusOnNextRepaint = element;
 
+    const htmlElement = element as HTMLElement;
+    const view = ((
+      htmlElement.ownerDocument &&
+      htmlElement.ownerDocument.defaultView
+    ) ? htmlElement.ownerDocument.defaultView : window);
+
     // element.focus() is a no-op if the element is no longer in the DOM, meaning this is always safe
-    element.ownerDocument.defaultView.requestAnimationFrame(() => {
+    view.requestAnimationFrame(() => {
       targetToFocusOnNextRepaint && targetToFocusOnNextRepaint.focus();
 
       // We are done focusing for this frame, so reset the queued focus element