comp(dropdown) fixed disabled tests, removed outdated

.travis.yml

@@ -17,8 +17,7 @@ script:
   - npm run build
   - rm -rf node_modules/ng2-bootstrap
   - npm i ./dist
-  #angular-cli test coverage is broken
-  #- npm run test-coverage
+  - npm run test-coverage
   - npm run test
 
 after_success:

karma.conf.js

@@ -6,18 +6,18 @@ const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
 module.exports = function (config) {
   const configuration = {
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('@angular/cli/plugins/karma')
     ],
     files: [
       {pattern: './scripts/test.ts', watched: false}
     ],
     preprocessors: {
-      './scripts/test.ts': ['angular-cli']
+      './scripts/test.ts': ['@angular/cli']
     },
     remapIstanbulReporter: {
       reports: {

src/dropdown/dropdown.config.ts

@@ -7,5 +7,5 @@ export class DropdownConfig {
   /** default dropdown auto closing behavior */
   public autoClose: string = NONINPUT;
   /** is keyboard navigation enabled by default */
-  public keyboardNav: Boolean = false;
+  public keyboardNav: boolean = false;
 }

src/dropdown/dropdown.directive.ts

@@ -4,7 +4,7 @@ import {
 } from '@angular/core';
 
 import { isBs3 } from '../utils/ng2-bootstrap-config';
-import { dropdownService } from './dropdown.service';
+import { DropdownService } from './dropdown.service';
 import { DropdownConfig } from './dropdown.config';
 
 /**
@@ -17,6 +17,7 @@ import { DropdownConfig } from './dropdown.config';
   host: {'[class.show]': 'isOpen && !isBs3'}
 })
 export class DropdownDirective implements OnInit, OnDestroy {
+  private dropdownService: DropdownService;
   /** if `true` dropdown will be opened */
   @HostBinding('class.open')
   @HostBinding('class.active')
@@ -26,6 +27,11 @@ export class DropdownDirective implements OnInit, OnDestroy {
   }
 
   public set isOpen(value: boolean) {
+    if (this._isOpen === !!value) {
+      // don't emit events
+      return;
+    }
+
     this._isOpen = !!value;
 
     // todo: implement after porting position
@@ -37,9 +43,9 @@ export class DropdownDirective implements OnInit, OnDestroy {
     // ready
     if (this.isOpen) {
       this.focusToggleElement();
-      dropdownService.open(this);
+      this.dropdownService.open(this);
     } else {
-      dropdownService.close(this);
+      this.dropdownService.close(this);
       this.selectedOption = void 0;
     }
     this.onToggle.emit(this.isOpen);
@@ -78,15 +84,21 @@ export class DropdownDirective implements OnInit, OnDestroy {
   // drop down toggle element
   public toggleEl: ElementRef;
   public el: ElementRef;
-  protected _isOpen: boolean;
+  protected _isOpen: boolean = false;
 
   protected _changeDetector: ChangeDetectorRef;
 
-  public constructor(el: ElementRef, ref: ChangeDetectorRef, config: DropdownConfig) {
+  public constructor(
+    el: ElementRef,
+    ref: ChangeDetectorRef,
+    dropdownService: DropdownService,
+    config: DropdownConfig
+  ) {
     // @Query('dropdownMenu', {descendants: false})
     // dropdownMenuList:QueryList<ElementRef>) {
     this.el = el;
     this._changeDetector = ref;
+    this.dropdownService = dropdownService;
     Object.assign(this, config);
     // todo: bind to route change event
   }
@@ -118,10 +130,14 @@ export class DropdownDirective implements OnInit, OnDestroy {
   }
 
   public show():void {
+    /** prevent global event handling */
+    this.dropdownService.preventEventHandling();
     this.isOpen = true;
   }
 
   public hide():void {
+    /** prevent global event handling */
+    this.dropdownService.preventEventHandling();
     this.isOpen = false;
   }
 

src/dropdown/dropdown.module.ts

@@ -4,13 +4,14 @@ import { DropdownMenuDirective } from './dropdown-menu.directive';
 import { DropdownToggleDirective } from './dropdown-toggle.directive';
 import { DropdownDirective } from './dropdown.directive';
 import { DropdownConfig } from './dropdown.config';
+import { DropdownService } from './dropdown.service';
 
 @NgModule({
   declarations: [DropdownDirective, DropdownMenuDirective, DropdownToggleDirective],
   exports: [DropdownDirective, DropdownMenuDirective, DropdownToggleDirective]
 })
 export class DropdownModule {
   public static forRoot(): ModuleWithProviders {
-    return {ngModule: DropdownModule, providers: [DropdownConfig]};
+    return {ngModule: DropdownModule, providers: [DropdownConfig, DropdownService]};
   }
 }

src/dropdown/dropdown.service.ts

@@ -1,20 +1,25 @@
+import { Injectable } from '@angular/core';
+
+import { DropdownDirective } from './dropdown.directive';
+
 export const ALWAYS = 'always';
 export const DISABLED = 'disabled';
 export const OUTSIDECLICK = 'outsideClick';
 export const NONINPUT = 'nonInput';
 
-import { DropdownDirective } from './dropdown.directive';
-
 /* tslint:disable-next-line */
 const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
 /* tslint:disable-next-line */
 const MouseEvent = (global as any).MouseEvent as MouseEvent;
 
+@Injectable()
 export class DropdownService {
-  protected openScope:DropdownDirective;
+  private openScope:DropdownDirective;
+
+  private closeDropdownBind:EventListener = this.closeDropdown.bind(this);
+  private keybindFilterBind:EventListener = this.keybindFilter.bind(this);
 
-  protected closeDropdownBind:EventListener = this.closeDropdown.bind(this);
-  protected keybindFilterBind:EventListener = this.keybindFilter.bind(this);
+  private suspendedEvent: any;
 
   public open(dropdownScope:DropdownDirective):void {
     if (!this.openScope) {
@@ -39,34 +44,44 @@ export class DropdownService {
     window.document.removeEventListener('keydown', this.keybindFilterBind);
   }
 
-  protected closeDropdown(event:MouseEvent):void {
-    if (!this.openScope) {
-      return;
-    }
-
-    if (event && this.openScope.autoClose === DISABLED) {
-      return;
-    }
-
-    if (event && this.openScope.toggleEl &&
-      this.openScope.toggleEl.nativeElement.contains(event.target)) {
-      return;
-    }
-
-    if (event && this.openScope.autoClose === NONINPUT &&
-      this.openScope.menuEl &&
-      /input|textarea/i.test((event.target as any).tagName) &&
-      this.openScope.menuEl.nativeElement.contains(event.target)) {
-      return;
-    }
-
-    if (event && this.openScope.autoClose === OUTSIDECLICK &&
-      this.openScope.menuEl &&
-      this.openScope.menuEl.nativeElement.contains(event.target)) {
-      return;
-    }
+  public preventEventHandling(): void {
+    clearTimeout(this.suspendedEvent);
+  }
 
-    this.openScope.isOpen = false;
+  protected closeDropdown(event:MouseEvent):void {
+    this.suspendedEvent = setTimeout(() => {
+      if (!this.openScope) {
+        return;
+      }
+
+      if (event && this.openScope.autoClose === DISABLED) {
+        return;
+      }
+
+      if (event && this.openScope.toggleEl &&
+        this.openScope.toggleEl.nativeElement.contains(event.target)) {
+        return;
+      }
+
+      if (event && this.openScope.autoClose === NONINPUT &&
+        this.openScope.menuEl &&
+        /input|textarea/i.test((event.target as any).tagName) &&
+        this.openScope.menuEl.nativeElement.contains(event.target)) {
+        return;
+      }
+
+      if (event && this.openScope.autoClose === OUTSIDECLICK &&
+        this.openScope.menuEl &&
+        this.openScope.menuEl.nativeElement.contains(event.target)) {
+        return;
+      }
+
+      if (event) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      this.openScope.isOpen = false;
+    }, 0);
   }
 
   protected keybindFilter(event:KeyboardEvent):void {
@@ -84,5 +99,3 @@ export class DropdownService {
     }
   }
 }
-
-export let dropdownService = new DropdownService();

src/spec/dropdown.directive.spec.ts

@@ -1,6 +1,6 @@
 /* tslint:disable:max-file-line-count */
 import { Component } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 
 import { DropdownModule } from '../dropdown/dropdown.module';
 import { DropdownConfig } from '../dropdown/dropdown.config';
@@ -77,7 +77,7 @@ describe('Directive: Dropdown', () => {
     expect(element.querySelector('.dropdown').classList).not.toContain('open');
   });
 
-  it('should close by click on nonInput menu item', () => {
+  it('should close by click on nonInput menu item', fakeAsync(() => {
     const html = `
       <div dropdown>
         <button dropdownToggle>Dropdown</button>
@@ -100,10 +100,10 @@ describe('Directive: Dropdown', () => {
     fixture.detectChanges();
     expect(element.querySelector('.dropdown').classList).toContain('open');
     element.querySelector('li').click();
+    tick();
     fixture.detectChanges();
     expect(element.querySelector('.dropdown').classList).not.toContain('open');
-
-  });
+  }));
 
   it('should not close by click on input or textarea menu item', () => {
     const html = `