fix(dropdown): click outside dropdown closes dropdown

Fixed issue where clicking outside an open dropdown did not close the dropdown. Closes #254. Closes #264.
ngOfficeUIFabric · Mar 31, 2016 · a8c83ea · a8c83ea
1 parent a5c473b
commit a8c83ea
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@
 
 #### Fixes
 - **uif-breadcrumb**: updated to match refactored fabric control ([6cb2314](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/commit/6cb2314), closes [#260](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/pull/260))
+- **uif-choicefield**
+  - click outside dropdown closes dropdown ([dc22c3cf](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/commit/dc22c3cf), closes [#254](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/254))
 
 <a name="0.7.1"></a>
 ### [0.7.1 - March 28, 2016](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/releases/tag/0.7.1)

diff --git a/src/components/dropdown/dropdownDirective.spec.ts b/src/components/dropdown/dropdownDirective.spec.ts
@@ -44,6 +44,7 @@
         let dropdown: JQuery = $compile('<uif-dropdown></uif-dropdown>')($scope);
         $scope.$digest();
         dropdown = jQuery(dropdown[0]);
+        dropdown.appendTo(document.body);
 
         dropdown.click();
         let div: JQuery = dropdown.find('div.ms-Dropdown');
@@ -52,6 +53,11 @@
 
         dropdown.click();
         expect(div.hasClass('is-open')).toBe(false, 'Should not have class is-open after click');
+
+        dropdown.click();
+        expect(div.hasClass('is-open')).toBe(true, 'Should have class is-open after click');
+        $('html').click();
+        expect(div.hasClass('is-open')).toBe(false, 'Should not have class is-open after click on HTML');
     }));
     it('should be able to select an option', inject(($compile: Function, $rootScope: ng.IRootScopeService) => {
         let $scope: any = $rootScope.$new();

diff --git a/src/components/dropdown/dropdownDirective.ts b/src/components/dropdown/dropdownDirective.ts
@@ -87,18 +87,31 @@ export class DropdownOptionDirective implements ng.IDirective {
  *
  */
 export class DropdownController {
-    public static $inject: string[] = ['$element', '$scope'];
-    public constructor(public $element: JQuery, public $scope: IDropdownScope) {
+    public static $inject: string[] = ['$element', '$scope', '$document'];
+    public constructor(public $element: JQuery, public $scope: IDropdownScope, public $document: ng.IDocumentService) {
     }
 
     public init(): void {
         let self: DropdownController = this;
-        this.$element.bind('click', function(): void {
+        this.$element.on('click', function(e: Event): void {
             if (!self.$scope.disabled) {
                 self.$scope.isOpen = !self.$scope.isOpen;
                 self.$scope.$apply();
                 let dropdownWidth: number = angular.element(this.querySelector('.ms-Dropdown'))[0].clientWidth;
                 angular.element(this.querySelector('.ms-Dropdown-items'))[0].style.width = dropdownWidth + 'px';
+                e.stopPropagation();
+                if (self.$scope.isOpen) {
+                    let documentClickHandler: () => void = () => {
+                        // when clicking somewhere in the document, close it.
+                        self.$scope.isOpen = false;
+                        self.$scope.$apply();
+                        self.$document.off('click', documentClickHandler);
+                    };
+                    self.$document.on('click', documentClickHandler);
+                    self.$scope.$on('$destroy', function(): void {
+                        self.$document.off('click', documentClickHandler);
+                    });
+                }
             }
         });
         if (typeof this.$scope.ngModel !== 'undefined'  && this.$scope.ngModel != null) {