Merge branch 'master' into tooltip-ie

Author: zvonimirfras

src/dialog/dialog.directive.ts

@@ -135,7 +135,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	 */
 	ngOnInit() {
 		// fix for safari hijacking clicks
-		document.body.firstElementChild.addEventListener("click", () => null, true);
+		this.dialogService.singletonClickListen();
 
 		// bind events for hovering or clicking the host
 		if (this.trigger === "hover" || this.trigger === "mouseenter") {

src/dialog/dialog.service.ts

@@ -18,6 +18,11 @@ import { PlaceholderService } from "./../placeholder/placeholder.module";
  */
 @Injectable()
 export class DialogService {
+	/**
+	 * Used in `singletonClickListen`, don't count on its existence and values.
+	 */
+	private static listeningForBodyClicks = false;
+
 	/**
 	 * Reflects the open or closed state of the `Dialog`.
 	 * @memberof DialogService
@@ -157,4 +162,23 @@ export class DialogService {
 			}
 		}
 	}
+
+	/**
+	 * Fix for safari hijacking clicks.
+	 *
+	 * Runs on `ngOnInit` of every dialog. Ensures we don't have multiple listeners
+	 * because having many of them could degrade performance in certain cases (and is
+	 * not necessary for our use case)
+	 *
+	 * This is an internally used function, can change at any point (even get removed)
+	 * and changes to it won't be considered a breaking change. Use at your own risk.
+	 */
+	singletonClickListen() {
+		console.log("singleton");
+		if (!DialogService.listeningForBodyClicks) {
+			console.log("singleton click");
+			document.body.firstElementChild.addEventListener("click", () => null, true);
+			DialogService.listeningForBodyClicks = true;
+		}
+	}
 }

src/dropdown/dropdown.component.ts

@@ -390,7 +390,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 */
 	_appendToBody() {
 		const positionDropdown = () => {
-			let pos = position.findAbsolute(this.elementRef.nativeElement, this.dropdownWrapper, "bottom");
+			let pos = position.findAbsolute(this.dropdownButton.nativeElement, this.dropdownWrapper, "bottom");
 			// add -40 to the top position to account for carbon styles
 			pos = position.addOffset(pos, -40, 0);
 			pos = position.addOffset(pos, window.scrollY, window.scrollX);
@@ -399,7 +399,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 		this.dropdownMenu.nativeElement.style.display = "block";
 		this.dropdownWrapper = document.createElement("div");
 		this.dropdownWrapper.className = `dropdown ${this.elementRef.nativeElement.className}`;
-		this.dropdownWrapper.style.width = this.elementRef.nativeElement.offsetWidth + "px";
+		this.dropdownWrapper.style.width = this.dropdownButton.nativeElement.offsetWidth + "px";
 		this.dropdownWrapper.style.position = "absolute";
 		this.dropdownWrapper.appendChild(this.dropdownMenu.nativeElement);
 		document.body.appendChild(this.dropdownWrapper);

src/tabs/tab-headers.component.spec.ts

@@ -0,0 +1,25 @@
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { StaticIconModule } from "../icon/static-icon.module";
+
+import { TabHeaders } from "./tab-headers.component";
+
+describe("TabHeadersComponent", () => {
+	let component: TabHeaders;
+	let fixture: ComponentFixture<TabHeaders>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [TabHeaders],
+			imports: [BrowserAnimationsModule, StaticIconModule],
+			providers: []
+		});
+
+		fixture = TestBed.createComponent(TabHeaders);
+		component = fixture.componentInstance;
+	});
+
+	it("should work", () => {
+		expect(component instanceof TabHeaders).toBe(true);
+	});
+});

src/tabs/tab-headers.component.ts

@@ -53,12 +53,12 @@ import { Tab } from "./tab.component";
 						'bx--tabs__nav-item--selected': tab.active
 					}"
 					class="bx--tabs__nav-item"
-					role="presentation">
+					role="presentation"
+					(click)="selectTab(tabref, tab, i)">
 					<a
 						[attr.aria-selected]="tab.active"
 						[attr.tabindex]="(tab.active?0:-1)"
 						[attr.aria-controls]="tab.id"
-						(click)="selectTab(tabref, tab, i)"
 						(focus)="onTabFocus(tabref, i)"
 						draggable="false"
 						id="{{tab.id}}-header"