From 4e078a73dac385746a9148ec5d417b4513124b14 Mon Sep 17 00:00:00 2001
From: Eddie Liu <leddie24@gmail.com>
Date: Thu, 24 Nov 2016 11:08:23 -0800
Subject: [PATCH] Change hostTarget of ContextualMenu to toggle on click (#209)

* Fix context menu toggle on hostTarget click

* Change _toggleMenu method in ContextualMenu

* Fix contextual menu toggle on hostTarget

* Small change to dropdown
---
 .../ContextualMenu/ContextualMenu.ts          | 19 ++++++++++++++++++-
 src/components/Dropdown/Dropdown.ts           |  5 +++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/ContextualMenu/ContextualMenu.ts b/src/components/ContextualMenu/ContextualMenu.ts
index 00d5c154..aef19669 100644
--- a/src/components/ContextualMenu/ContextualMenu.ts
+++ b/src/components/ContextualMenu/ContextualMenu.ts
@@ -15,6 +15,7 @@ namespace fabric {
     private _hostTarget: Element;
     private _position: string;
     private _host: ContextualHost;
+    private _isOpen: boolean;
 
     constructor(
         container: Element,
@@ -24,6 +25,7 @@ namespace fabric {
       this._container = container;
       this._hostTarget = hostTarget;
       this._position = position ? position : MODAL_POSITION;
+      this._isOpen = false;
       this._setOpener(hostTarget);
       this._init();
     }
@@ -34,6 +36,15 @@ namespace fabric {
 
     private _init(): void {
       this._container.addEventListener("click", this._onContextualMenuClick.bind(this), true);
+      document.addEventListener("click", this._onDocumentClick.bind(this), false);
+    }
+
+    private _onDocumentClick(event: Event): void {
+      const target: HTMLElement = <HTMLElement>event.target;
+      const classList: DOMTokenList = target.classList;
+      if (!this._hostTarget.contains(target) && !classList.contains("ms-ContextualMenu-link")) {
+        this._isOpen = false;
+      }
     }
 
     private _onContextualMenuClick(event: Event): void {
@@ -46,6 +57,7 @@ namespace fabric {
           this._singleSelect(target);
           if (!target.parentElement.classList.contains("ms-ContextualMenu-item--hasMenu")) {
             this._host.disposeModal();
+            this._isOpen = false;
           }
         }
       }
@@ -68,10 +80,15 @@ namespace fabric {
       target.classList.add("is-selected");
     }
 
+    private _toggleMenu(event): void {
+      (!this._isOpen) ? this._openContextMenu(event) : this._host.disposeModal();
+      this._isOpen = !this._isOpen;
+    }
+
     private _setOpener(hostTarget: Element): void {
       hostTarget.addEventListener("click", (event) => {
           event.preventDefault();
-          this._openContextMenu(event);
+          this._toggleMenu(event);
         }
       );
     }
diff --git a/src/components/Dropdown/Dropdown.ts b/src/components/Dropdown/Dropdown.ts
index 2321df31..4f061bf4 100644
--- a/src/components/Dropdown/Dropdown.ts
+++ b/src/components/Dropdown/Dropdown.ts
@@ -121,10 +121,11 @@ namespace fabric {
       this._dropdownLabelHelper.textContent = origText;
       if (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight) {
         let i = 0;
+        let ellipsis = "...";
+        let newText;
         do {
           i--;
-          let newText = origText.slice(0, i);
-          let ellipsis = "...";
+          newText = origText.slice(0, i);
           this._dropdownLabelHelper.textContent = newText + ellipsis;
         } while (this._dropdownLabelHelper.offsetHeight > this._newDropdownLabel.offsetHeight);
       }