Focuszone: onActiveItemChanged now fires (#7958)

* Reverting focuszone activeelementchanged change, and adding a test.

* Adding change file.

* Remove lint issue

Author: dzearing

common/changes/office-ui-fabric-react/focuszone-active_2019-02-12-00-45.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "FocusZone: fixing issue where onActiveItemChanged was no longer firing.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dzearing@microsoft.com"
+}

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

@@ -5,7 +5,7 @@ import { setRTL, KeyCodes } from '../../Utilities';
 import { FocusZone } from './FocusZone';
 import { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';
 
-// tslint:disable:typedef
+// tslint:disable:typedef jsx-no-lambda
 
 describe('FocusZone', () => {
   let lastFocusedElement: HTMLElement | undefined;
@@ -230,6 +230,35 @@ describe('FocusZone', () => {
     expect(document.activeElement).toBe(host.querySelector('#b'));
   });
 
+  it('can call onActiveItemChanged when the active item is changed', () => {
+    let called = false;
+    const component = ReactTestUtils.renderIntoDocument(
+      <FocusZone onActiveElementChanged={() => (called = true)}>
+        <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>
+    );
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance)!!.firstChild as Element;
+    const buttonA = focusZone.querySelector('#a') as HTMLElement;
+    const buttonB = focusZone.querySelector('#b') as HTMLElement;
+
+    ReactTestUtils.Simulate.mouseDown(focusZone, { target: buttonA });
+    ReactTestUtils.Simulate.focus(focusZone, { target: buttonA });
+
+    expect(called).toEqual(true);
+    called = false;
+
+    ReactTestUtils.Simulate.mouseDown(focusZone, { target: buttonB });
+    ReactTestUtils.Simulate.focus(focusZone, { target: buttonB });
+
+    expect(called).toEqual(true);
+    called = false;
+  });
+
   describe('parking and unparking', () => {
     let buttonA: HTMLElement;
 

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

@@ -293,10 +293,10 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       if (isImmediateDescendant) {
         this._setFocusAlignment(this._activeElement);
       }
+    }
 
-      if (onActiveElementChanged) {
-        onActiveElementChanged(this._activeElement as HTMLElement, ev);
-      }
+    if (onActiveElementChanged) {
+      onActiveElementChanged(this._activeElement as HTMLElement, ev);
     }
 
     if (doNotAllowFocusEventToPropagate) {