Merge pull request #398 from SamGraber/dropdowns_click_off_to_close

Dropdowns click off to close

Author: BrentWMiller

bootstrapper/popup/popupNg2.html

@@ -18,8 +18,8 @@ <h3>Popup content</h3>
 		<div *rlDialogHeader>Header 2</div>
 		<div *rlDialogContent>
 			<rlTextbox label="Textbox" name="textbox" rlRequired="Required"></rlTextbox>
-			<rlSelect label="Select" name="select" [options]="options" rlRequired="Required"></rlSelect>
-			<rlTypeahead label="Typeahead" name="typeahead" [getItems]="getOptions" rlRequired="Required" allowCollapse="true"></rlTypeahead>
+			<rlSelect label="Select" name="select" [options]="options" rlRequired="Required" nullOption="None"></rlSelect>
+			<rlTypeahead label="Typeahead" name="typeahead" [getItems]="getOptions" rlRequired="Required" allowCollapse="true" [create]="create"></rlTypeahead>
 		</div>
 	</rlDialog>
 	<rlPromptDialog #prompt

bootstrapper/popup/popupNg2Bootstrapper.ts

@@ -31,4 +31,6 @@ export class PopupBootstrapper {
 	save = (data) => {
 		console.log(data);
 	}
+
+	create = x => x;
 }

source/behaviors/offClick/offClick.ts

@@ -3,6 +3,8 @@ import { Directive, Host, Input, Output, EventEmitter, OnInit, OnDestroy, Simple
 import { services } from 'typescript-angular-utilities';
 import __guid = services.guid;
 
+import { DocumentWrapper } from '../../services/document/document.provider';
+
 export interface IOffClickEvent extends MouseEvent {
 	rlEventIdentifier: string;
 }
@@ -15,7 +17,17 @@ export interface IOffClickEvent extends MouseEvent {
 })
 export class OffClickDirective implements OnInit, OnDestroy {
 	@Output('offClick') offClick: EventEmitter<any> = new EventEmitter();
-	@Input('offClickActive') active: boolean = true;
+
+	private _active: boolean = true;
+	@Input('offClickActive') set active(value: boolean)
+	{
+		if (value) {
+			this.addListener();
+		} else {
+			this.removeListener();
+		}
+		this._active = value;
+	}
 
 	listener: { ($event: MouseEvent): void } = ($event: IOffClickEvent) => {
 		if ($event.rlEventIdentifier !== this.identifier) {
@@ -24,35 +36,28 @@ export class OffClickDirective implements OnInit, OnDestroy {
 	};
 
 	identifier: string;
+	document: Document;
 
-	constructor(guidService: __guid.GuidService) {
+	constructor(guidService: __guid.GuidService
+			, document: DocumentWrapper) {
 		this.identifier = guidService.random();
+		this.document = <any>document;
 	}
 
 	ngOnInit() {
-		if (this.active) {
+		if (this._active) {
 			setTimeout(() => {
 				this.addListener();
 			});
 		}
 	}
 
-	ngOnChanges(changes: SimpleChanges): void {
-		if (changes['active']) {
-			if (changes['active'].currentValue) {
-				this.addListener();
-			} else {
-				this.removeListener();
-			}
-		}
-	}
-
 	addListener(): void {
-		document.addEventListener('click', this.listener);
+		this.document.addEventListener('click', this.listener);
 	}
 
 	removeListener(): void {
-		document.removeEventListener('click', this.listener);
+		this.document.removeEventListener('click', this.listener);
 	}
 
 	ngOnDestroy() {

source/componentProviders.module.ts

@@ -15,6 +15,7 @@ import { MergeSort } from './components/cardContainer/sorts/mergeSort/mergeSort.
 
 import { AsyncHelper } from './services/async/async.service';
 import { AutosaveActionService } from './services/autosaveAction/autosaveAction.service';
+import { DOCUMENT_PROVIDER } from './services/document/document.provider';
 import { DocumentService } from './services/documentWrapper/documentWrapper.service';
 import { FormService } from './services/form/form.service';
 import { JQUERY_PROVIDER } from './services/jquery/jquery.provider';
@@ -66,8 +67,9 @@ const defaultThemeNg1: FactoryProvider = {
 		DefaultTheme,
 		defaultThemeNg1,
 		DialogRootService,
-		FormService,
+		DOCUMENT_PROVIDER,
 		DocumentService,
+		FormService,
 		BreakpointService,
 		VisibleBreakpointService,
 		JQUERY_PROVIDER,

source/components/inputs/select/select.html

@@ -3,25 +3,29 @@
 	 [class.error]="componentValidator.error$ | async"
 	 [class.rl-select-loading]="busy?.loading">
 	<label [@slide]="labelState">{{label}}</label>
-	<div class="form-control rl-select-trigger"
-		 [class.disabled]="disabled"
-		 [class.rl-select-open]="list.showOptions"
-		 (focus)="showLabel()"
-		 (blur)="hideLabelIfEmpty()"
-		 tabindex="0"
-		 rlPopoutTrigger>
-		<span class="placeholder"
-			  [class.hide-placeholder]="hidePlaceholder"
-			  [hidden]="value">{{label}}</span>
-		<span class="rl-select-choice">{{getDisplayName(value)}}</span>
+	<div class="rl-select-wrap"
+	 	 (offClick)="list.close()"
+	 	 [offClickActive]="list.showOptions">
+		<div class="form-control rl-select-trigger"
+			 [class.disabled]="disabled"
+			 [class.rl-select-open]="list.showOptions"
+			 (focus)="showLabel()"
+			 (blur)="hideLabelIfEmpty()"
+			 tabindex="0"
+			 rlPopoutTrigger>
+			<span class="placeholder"
+				  [class.hide-placeholder]="hidePlaceholder"
+				  [hidden]="value">{{label}}</span>
+			<span class="rl-select-choice">{{getDisplayName(value)}}</span>
+		</div>
+		<rlPopoutList #list
+					  [options]="options"
+					  [template]="template"
+					  [transform]="transform"
+					  (select)="select($event)">
+			<rlPopoutItem class="rl-select-option-null" *ngIf="nullOption" (trigger)="select(null)">{{nullOption}}</rlPopoutItem>
+		</rlPopoutList>
 	</div>
-	<rlPopoutList #list
-				  [options]="options"
-				  [template]="template"
-				  [transform]="transform"
-				  (select)="select($event)">
-		<rlPopoutItem class="rl-select-option-null" *ngIf="nullOption" (trigger)="select(null)">{{nullOption}}</rlPopoutItem>
-	</rlPopoutList>
 	<rlBusy [loading]="!options"></rlBusy>
 	<div *ngIf="componentValidator.error$ | async" class="error-string">
 		{{componentValidator.error$ | async}}

source/components/inputs/select/select.tests.ts

@@ -44,29 +44,18 @@ describe('SelectComponent', () => {
 		];
 	});
 
-	it('should set the value and close the options', (): void => {
-		const closeSpy = sinon.spy();
-		dropdown.list = <any>{
-			close: closeSpy,
-		};
-
+	it('should set the value', (): void => {
 		dropdown.select(options[1]);
 
-		sinon.assert.calledOnce(closeSpy);
 		sinon.assert.calledOnce(setValue);
 		sinon.assert.calledWith(setValue, options[1]);
 	});
 
-	it('should close the options without setting the value if the current value is reselected', (): void => {
-		const closeSpy = sinon.spy();
-		dropdown.list = <any>{
-			close: closeSpy,
-		};
+	it('should not set the value if the current value is reselected', (): void => {
 		dropdown.value = options[1];
 
 		dropdown.select(options[1]);
 
-		sinon.assert.calledOnce(closeSpy);
 		sinon.assert.notCalled(setValue);
 	});
 

source/components/inputs/select/select.ts

@@ -31,7 +31,6 @@ export class SelectComponent<T> extends ValidatedInputComponent<T> implements Af
 	@Input() externalTemplate: TemplateRef<any>;
 
 	@ViewChild(BusyComponent) busy: BusyComponent;
-	@ViewChild(PopoutListComponent) list: PopoutListComponent<T>;
 	@ContentChild(TemplateRef) template: TemplateRef<any>;
 
 	private transformService: __transform.ITransformService;
@@ -56,7 +55,6 @@ export class SelectComponent<T> extends ValidatedInputComponent<T> implements Af
 		if (value != this.value) {
 			this.setValue(value);
 		}
-		this.list.close();
 		this.hideLabelIfEmpty();
 	}
 

source/components/inputs/typeahead/typeahead.html

@@ -3,25 +3,29 @@
 	 [class.error]="componentValidator.error$ | async">
 	<label [@slide]="labelState">{{label}}</label>
 	<div [hidden]="collapsed">
-		<input class="form-control rl-select-trigger"
-			   #input
-			   type="text"
-			   [disabled]="disabled"
-			   [class.rl-select-open]="list.showOptions"
-			   [class.hide-placeholder]="hidePlaceholder"
-			   [placeholder]="placeholder"
-			   [value]="search"
-			   (focus)="showLabel()"
-			   (blur)="hideLabelIfEmpty()"
-			   rlPopoutTrigger
-			   (input)="searchStream.next($event.target.value)" />
-		<rlPopoutList [disabled]="!canShowOptions"
-					  [options]="visibleItems$ | async"
-					  [template]="template"
-					  [transform]="transform"
-					  (select)="selectItem($event)">
-			<rlPopoutItem class="rl-select-option-custom" *ngIf="allowCustomOption" (trigger)="selectCustom()">{{search}}</rlPopoutItem>
-		</rlPopoutList>
+		<div class="rl-select-wrap"
+			 (offClick)="list.close()"
+			 [offClickActive]="list.showOptions || false">
+			<input class="form-control rl-select-trigger"
+				   #input
+				   type="text"
+				   [disabled]="disabled"
+				   [class.rl-select-open]="list.showOptions"
+				   [class.hide-placeholder]="hidePlaceholder"
+				   [placeholder]="placeholder"
+				   [value]="search"
+				   (input)="searchStream.next($event.target.value)"
+				   (focus)="showLabel()"
+				   (blur)="hideLabelIfEmpty()"
+				   rlPopoutTrigger />
+			<rlPopoutList [disabled]="!canShowOptions"
+						  [options]="visibleItems$ | async"
+						  [template]="template"
+						  [transform]="transform"
+						  (select)="selectItem($event)">
+				<rlPopoutItem class="rl-select-option-custom" *ngIf="allowCustomOption" (trigger)="selectCustom()">{{search}}</rlPopoutItem>
+			</rlPopoutList>
+		</div>
 	</div>
 	<div class="collapsed" [hidden]="!collapsed">
 		<span>{{getDisplayName(value)}}</span>

source/components/inputs/typeahead/typeahead.tests.ts

@@ -38,7 +38,8 @@ describe('TypeaheadComponent', () => {
 			validate: sinon.spy(() => Observable.empty()),
 		};
 
-		typeahead = new TypeaheadComponent(__transform.transform, null, validator, __object.objectUtility, __array.arrayUtility, __guid.guid, __search.searchUtility);
+		const changeDetectorMock = { detectChanges: sinon.spy() };
+		typeahead = new TypeaheadComponent(__transform.transform, null, validator, __object.objectUtility, __array.arrayUtility, __guid.guid, __search.searchUtility, <any>changeDetectorMock);
 
 		setValue = sinon.spy();
 		typeahead.setValue = setValue;

source/components/inputs/typeahead/typeahead.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, Optional, OnInit, OnChanges, SimpleChange, ViewChild, ContentChild, TemplateRef, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, Optional, OnInit, OnChanges, SimpleChange, ViewChild, ContentChild, TemplateRef, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import { find, filter, isEqual, cloneDeep } from 'lodash';
 
@@ -64,6 +64,7 @@ export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements
 
 	transformService: __transform.ITransformService;
 	searchUtility: __search.ISearchUtility;
+	changeDetector: ChangeDetectorRef;
 
 	get visibleItems$(): Observable<T[]> {
 		return this._visibleItems.asObservable();
@@ -83,10 +84,12 @@ export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements
 			, object: __object.ObjectUtility
 			, array: __array.ArrayUtility
 			, guid: __guid.GuidService
-			, searchService: __search.SearchUtility) {
+			, searchService: __search.SearchUtility
+			, changeDetector: ChangeDetectorRef) {
 		super(rlForm, componentValidator, object, array, guid);
 		this.transformService = transformService;
 		this.searchUtility = searchService;
+		this.changeDetector = changeDetector;
 		this.inputType = 'typeahead';
 		this.search = '';
 		this._visibleItems = new BehaviorSubject(null);
@@ -116,7 +119,6 @@ export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements
 	}
 
 	selectItem(item: T): void {
-		this.list.close();
 		this.search = '';
 
 		this.selector.emit(item);
@@ -145,6 +147,7 @@ export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements
 				if (!isEqual(data, this.cacheDisplayList)) {
 					this.list.open();
 					this.cacheDisplayList = cloneDeep(data);
+					this.changeDetector.detectChanges();
 					return this._visibleItems.next(this.cacheDisplayList);
 				}
 			});

source/components/popoutList/popoutItem.html

@@ -1,6 +1,7 @@
 <li class="rl-select-option"
 	[class.focused]="focused"
 	(mouseover)="focus()"
-	(mouseleave)="blur()">
+	(mouseleave)="blur()"
+	(click)="select()">
 	<ng-content></ng-content>
-</li>
+</li>

source/components/popoutList/popoutItem.ts

@@ -26,4 +26,8 @@ export class PopoutItemComponent<T> {
 	blur(): void {
 		this.list.blur();
 	}
+
+	select(): void {
+		this.list.selectCurrent();
+	}
 }

source/components/popoutList/popoutList.service.tests.ts

@@ -7,15 +7,6 @@ describe('PopoutListService', () => {
 		listService = new PopoutListService<string>();
 	});
 
-	it('should close the list on a select event', (): void => {
-		const closeSpy = sinon.spy();
-		listService.close = closeSpy;
-
-		listService.select.next('value');
-
-		sinon.assert.calledOnce(closeSpy);
-	});
-
 	describe('showOptions', (): void => {
 		it('should close the options', (): void => {
 			listService._showOptions = true;
@@ -168,5 +159,14 @@ describe('PopoutListService', () => {
 
 			sinon.assert.notCalled(emitSpy);
 		});
+
+		it('should close the list on a selection', (): void => {
+			const closeSpy = sinon.spy();
+			listService.close = closeSpy;
+
+			listService.selectCurrent();
+
+			sinon.assert.calledOnce(closeSpy);
+		});
 	});
 });

source/components/popoutList/popoutList.service.ts

@@ -20,10 +20,6 @@ export class PopoutListService<T> {
 	customItems: QueryList<PopoutItemComponent<T>>;
 	listItems: QueryList<PopoutItemComponent<T>>;
 
-	constructor() {
-		this.select.subscribe(() => this.close());
-	}
-
 	open(): void {
 		this._showOptions = true;
 	}
@@ -78,6 +74,7 @@ export class PopoutListService<T> {
 			this.current.trigger.emit(null);
 			this.focusIndex = null;
 		}
+		this.close();
 	}
 
 	get current(): PopoutItemComponent<T> {