From 8fb7b311575f79171637eac57f60bffca96285b0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Wed, 14 Mar 2018 15:29:04 -0700
Subject: [PATCH 1/5] Update SplitButton submenu in ContextualMenu to base
 itself of the splitButtonContainer

---
 .../ContextualMenu/ContextualMenu.tsx           | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 486c476b21bad4..01ab9f7db27e01 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -627,7 +627,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _renderSplitIconButton(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number) {
     const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
     const itemProps = {
-      onClick: this._onItemClick.bind(this, item),
+      onClick: this._onSplitItemClick.bind(this, item),
       disabled: this._isItemDisabled(item),
       className: classNames.splitMenu,
       subMenuProps: item.subMenuProps,
@@ -804,7 +804,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     if (hasSubmenu(item)) {
       this._enterTimerId = this._async.setTimeout(() => {
         targetElement.focus();
-        this._onItemSubMenuExpand(item, targetElement);
+        this._onItemSubMenuExpand(item,
+          ((item.split && targetElement.parentElement) ? targetElement.parentElement : targetElement) as HTMLElement);
       }, this._navigationIdleDelay);
     } else {
       this._enterTimerId = this._async.setTimeout(() => {
@@ -821,6 +822,16 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _onItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
+    this._onItemClickBase(item, ev, ev.currentTarget as HTMLElement);
+  }
+
+  private _onSplitItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
+    // get the whole splitButton container to base the menu off of
+    this._onItemClickBase(item, ev,
+      (ev.currentTarget.parentElement ? ev.currentTarget.parentElement : ev.currentTarget) as HTMLElement);
+  }
+
+  private _onItemClickBase(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>, target: HTMLElement) {
     const items = getSubmenuItems(item);
 
     if (!hasSubmenu(item) && (!items || !items.length)) { // This is an item without a menu. Click it.
@@ -829,7 +840,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       if (item.key === this.state.expandedMenuItemKey) { // This has an expanded sub menu. collapse it.
         this._onSubMenuDismiss(ev);
       } else { // This has a collapsed sub menu. Expand it.
-        this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
+        this._onItemSubMenuExpand(item, target);
       }
     }
 

From c7985030e8c9fb314d398d92fb24699db50654e0 Mon Sep 17 00:00:00 2001
From: "REDMOND\\jspurlin" <jspurlin@microsoft.com>
Date: Wed, 14 Mar 2018 15:41:16 -0700
Subject: [PATCH 2/5] rush change

---
 ...uFixSplitButtonSubmenuTarget_2018-03-14-22-41.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/jspurlin-ContextualMenuFixSplitButtonSubmenuTarget_2018-03-14-22-41.json

diff --git a/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuFixSplitButtonSubmenuTarget_2018-03-14-22-41.json b/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuFixSplitButtonSubmenuTarget_2018-03-14-22-41.json
new file mode 100644
index 00000000000000..64c43c559bc620
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/jspurlin-ContextualMenuFixSplitButtonSubmenuTarget_2018-03-14-22-41.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ContextualMenu: SplitButtons in ContextualMenus are incorrectly using the menuLauncher portion of the splitButton for the tagrate when the  menuLauncher portion is  activated. This can lead to weird overhangs of the parent menu even if  directionalHintFixed is not true (e.g. it will overlap the primary portion of the  splitButton and potentially other items in the parent menu)",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jspurlin@microsoft.com"
+}
\ No newline at end of file

From 83bf20528210797359618fb84d5e602992601e98 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 23 Mar 2018 12:05:43 -0700
Subject: [PATCH 3/5] used ref to pass in container instead of parent element
 for more defenseive code

---
 .../src/components/ContextualMenu/ContextualMenu.tsx           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 8051bbeda7ada0..f57129ac799ada 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -833,8 +833,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     if (hasSubmenu(item)) {
       this._enterTimerId = this._async.setTimeout(() => {
         targetElement.focus();
+        const splitButtonContainer = this._splitButtonContainers.get(item);
         this._onItemSubMenuExpand(item,
-          ((item.split && targetElement.parentElement) ? targetElement.parentElement : targetElement) as HTMLElement);
+          ((item.split && splitButtonContainer) ? splitButtonContainer : targetElement) as HTMLElement);
       }, this._navigationIdleDelay);
     } else {
       this._enterTimerId = this._async.setTimeout(() => {

From d42b8a2440f7163268dd3bb1e6eef0f0a66f6ca5 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 23 Mar 2018 12:41:59 -0700
Subject: [PATCH 4/5] changed class to use correct refs

---
 .../src/components/ContextualMenu/ContextualMenu.tsx       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index f57129ac799ada..b1b71fe89a986a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -810,7 +810,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
    * As part of updating focus, This function will also update
    * the expand/collapse state accordingly.
    */
-  private _updateFocusOnMouseEvent(item: any, ev: React.MouseEvent<HTMLElement>) {
+  private _updateFocusOnMouseEvent(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
     const targetElement = ev.currentTarget as HTMLElement;
     const { subMenuHoverDelay: timeoutDuration = this._navigationIdleDelay } = this.props;
 
@@ -833,7 +833,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     if (hasSubmenu(item)) {
       this._enterTimerId = this._async.setTimeout(() => {
         targetElement.focus();
-        const splitButtonContainer = this._splitButtonContainers.get(item);
+        const splitButtonContainer = this._splitButtonContainers.get(item.key);
         this._onItemSubMenuExpand(item,
           ((item.split && splitButtonContainer) ? splitButtonContainer : targetElement) as HTMLElement);
       }, this._navigationIdleDelay);
@@ -856,9 +856,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _onSplitItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
+    const splitButtonContainer = this._splitButtonContainers.get(item.key);
     // get the whole splitButton container to base the menu off of
     this._onItemClickBase(item, ev,
-      (ev.currentTarget.parentElement ? ev.currentTarget.parentElement : ev.currentTarget) as HTMLElement);
+      (splitButtonContainer ? splitButtonContainer : ev.currentTarget) as HTMLElement);
   }
 
   private _onItemClickBase(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>, target: HTMLElement) {

From 41a6361d94fcee4773b316a7bf419e41a7a96540 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Mon, 26 Mar 2018 20:51:35 -0700
Subject: [PATCH 5/5] added example and refactored focus

---
 .../ContextualMenu/ContextualMenu.tsx         |  7 +---
 .../ContextualMenu.Checkmarks.Example.tsx     | 38 +++++++++++++++++--
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index b1b71fe89a986a..9f9a3e484bd3c4 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -914,11 +914,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         this._onSubMenuDismiss();
       }
 
-      // focus the container so when we close the menu, we focus on the split button container.
-      const el = this._splitButtonContainers.get(item.key);
-      if (el) {
-        el.focus();
-      }
+      // Focus the target to ensure when we close it, we're focusing on the correct element.
+      target.focus();
       this.setState({
         expandedMenuItemKey: item.key,
         submenuTarget: target
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
index cda93290150428..1eed388377c904 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IContextualMenuItem, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IContextualMenuItem, ContextualMenuItemType, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import './ContextualMenuExample.scss';
 
@@ -7,7 +7,7 @@ export interface IContextualMenuMultiselectExampleState {
   selection?: { [key: string]: boolean };
 }
 
-const keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent', 'disabledNewSub', 'disabledEmailMessage', 'disabledCalendarEvent'];
+const keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent', 'disabledNewSub', 'disabledEmailMessage', 'disabledCalendarEvent', 'splitButtonSubMenuLeftDirection', 'emailMessageLeft', 'calendarEventLeft'];
 
 export class ContextualMenuCheckmarksExample extends React.Component<{}, IContextualMenuMultiselectExampleState> {
 
@@ -110,14 +110,14 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
                   subMenuProps: {
                     items: [
                       {
-                        key: keys[6],
+                        key: keys[9],
                         name: 'Email message',
                         canCheck: true,
                         isChecked: selection![keys[9]],
                         onClick: this._onToggleSelect
                       },
                       {
-                        key: keys[7],
+                        key: keys[10],
                         name: 'Calendar event',
                         canCheck: true,
                         isChecked: selection![keys[10]],
@@ -132,6 +132,36 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
                   onClick: this._onToggleSelect,
                   disabled: true
                 },
+                {
+                  key: keys[11],
+                  iconProps: {
+                    iconName: 'MusicInCollectionFill'
+                  },
+                  subMenuProps: {
+                    directionalHint: DirectionalHint.leftCenter,
+                    items: [
+                      {
+                        key: keys[12],
+                        name: 'Email message',
+                        canCheck: true,
+                        isChecked: selection![keys[12]],
+                        onClick: this._onToggleSelect
+                      },
+                      {
+                        key: keys[13],
+                        name: 'Calendar event',
+                        canCheck: true,
+                        isChecked: selection![keys[13]],
+                        onClick: this._onToggleSelect
+                      }
+                    ],
+                  },
+                  name: 'Split Button Left Menu',
+                  canCheck: true,
+                  isChecked: selection![keys[11]],
+                  split: true,
+                  onClick: this._onToggleSelect,
+                },
               ]
           }
         }