fixing focusZone algnment issue

common/changes/@uifabric/example-app-base/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/experiments/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/experiments",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/fabric-website/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/fabric-website",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/file-type-icons/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/file-type-icons",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/file-type-icons",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/icons/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/icons",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/icons",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/jest-serializer-merge-styles/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/jest-serializer-merge-styles",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/jest-serializer-merge-styles",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/merge-styles/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/merge-styles",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/styling/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/styling",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "jolore@microsoft.com"
+}

common/changes/@uifabric/utilities/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "jolore@microsoft.com"
+}

common/changes/office-ui-fabric-react/jolore-focusZoneUpdate_2018-04-07-00-43.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "updating focuszone to update alignment on focus",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jolore@microsoft.com"
+}

packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap

@@ -44,6 +44,7 @@ exports[`CommandBar renders commands correctly 1`] = `
               flex-grow: 1;
             }
         data-focuszone-id="FocusZone0"
+        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -286,6 +287,7 @@ exports[`CommandBar renders commands correctly 1`] = `
               flex-shrink: 0;
             }
         data-focuszone-id="FocusZone7"
+        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap

@@ -27,6 +27,7 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
         aria-labelledby={undefined}
         className="ms-FocusZone"
         data-focuszone-id="FocusZone0"
+        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -171,6 +172,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
         aria-labelledby={undefined}
         className="ms-FocusZone"
         data-focuszone-id="FocusZone5"
+        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}
@@ -380,6 +382,7 @@ exports[`Breadcrumb renders breadcumb correctly 3`] = `
         aria-labelledby={undefined}
         className="ms-FocusZone"
         data-focuszone-id="FocusZone11"
+        onClick={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
         onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap

@@ -91,6 +91,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               aria-labelledby={undefined}
               className="ms-FocusZone"
               data-focuszone-id="FocusZone12"
+              onClick={[Function]}
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}
@@ -958,6 +959,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               aria-labelledby={undefined}
               className="ms-FocusZone"
               data-focuszone-id="FocusZone13"
+              onClick={[Function]}
               onFocus={[Function]}
               onKeyDown={[Function]}
               onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`CommandBar renders CommandBar correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone1"
+    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsHeader.test.tsx.snap

@@ -8,6 +8,7 @@ exports[`DetailsHeader can render 1`] = `
   className="ms-FocusZone ms-DetailsHeader"
   data-automationid="DetailsHeader"
   data-focuszone-id="FocusZone1"
+  onClick={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`DetailsList renders List correctly 1`] = `
           className="ms-FocusZone ms-DetailsHeader"
           data-automationid="DetailsHeader"
           data-focuszone-id="FocusZone1"
+          onClick={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDownCapture={[Function]}
@@ -203,6 +204,7 @@ exports[`DetailsList renders List correctly 1`] = `
           className="ms-FocusZone"
           data-focuszone-id="FocusZone2"
           onBlur={[Function]}
+          onClick={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
           onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Facepile renders Facepile correctly 1`] = `
       aria-labelledby={undefined}
       className="ms-FocusZone ms-Facepile-members"
       data-focuszone-id="FocusZone1"
+      onClick={[Function]}
       onFocus={[Function]}
       onKeyDown={[Function]}
       onMouseDownCapture={[Function]}

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

@@ -146,6 +146,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
         aria-describedby={ ariaDescribedBy }
         onKeyDown={ this._onKeyDown }
         onFocus={ this._onFocus }
+        onClick={ this._onClick }
         onMouseDownCapture={ this._onMouseDown }
       >
         { this.props.children }
@@ -212,23 +213,34 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   private _onFocus = (ev: React.FocusEvent<HTMLElement>): void => {
     const { onActiveElementChanged } = this.props;
 
-    if (this._isImmediateDescendantOfZone(ev.target as HTMLElement)) {
-      this._activeElement = ev.target as HTMLElement;
-      this._setFocusAlignment(this._activeElement);
+    this._setTargetElement(ev.target, false);
+    if (onActiveElementChanged) {
+      onActiveElementChanged(this._activeElement as HTMLElement, ev);
+    }
+  }
+
+  private _onClick = (ev: React.MouseEvent<HTMLElement>): void => {
+    this._setTargetElement(ev.target, true);
+  }
+
+  private _setTargetElement = (target: EventTarget, forceUpdateAlignment?: boolean): void => {
+    const { onActiveElementChanged } = this.props;
+
+    if (this._isImmediateDescendantOfZone(target as HTMLElement)) {
+      this._activeElement = target as HTMLElement;
+      this._setFocusAlignment(this._activeElement, forceUpdateAlignment, forceUpdateAlignment);
     } else {
-      let parentElement = ev.target as HTMLElement;
+      let parentElement = target as HTMLElement;
 
       while (parentElement && parentElement !== this._root.value) {
         if (isElementTabbable(parentElement) && this._isImmediateDescendantOfZone(parentElement)) {
           this._activeElement = parentElement;
+          this._setFocusAlignment(this._activeElement, forceUpdateAlignment, forceUpdateAlignment);
           break;
         }
         parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS) as HTMLElement;
       }
     }
-    if (onActiveElementChanged) {
-      onActiveElementChanged(this._activeElement as HTMLElement, ev);
-    }
   }
 
   /**

packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`Nav renders Nav correctly 1`] = `
   aria-labelledby={undefined}
   className="ms-FocusZone"
   data-focuszone-id="FocusZone0"
+  onClick={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone1"
+    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`Rating Renders Rating correctly 1`] = `
         }
     data-focuszone-id="FocusZone2"
     data-is-focusable={false}
+    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
       }
   data-focuszone-id="FocusZone3"
   onBlur={[Function]}
+  onClick={[Function]}
   onFocus={[Function]}
   onKeyDown={[Function]}
   onMouseDownCapture={[Function]}

packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap

@@ -10,6 +10,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone0"
+    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}
@@ -77,6 +78,7 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = `
     aria-labelledby={undefined}
     className="ms-FocusZone"
     data-focuszone-id="FocusZone17"
+    onClick={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
     onMouseDownCapture={[Function]}