Merge pull request #196 from cal-smith/dropdown

fix(dropdown): add value input for ngModel

Author: zvonimirfras

src/dropdown/dropdown.component.ts

@@ -115,6 +115,10 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * @memberof Dropdown
 	 */
 	@Input() scrollableContainer: string;
+	/**
+	 * Specifies the property to be used as the return value to `ngModel`
+	 */
+	@Input() value: string;
 	/**
 	 * Accessible label for the button that opens the dropdown list.
 	 * Defaults to the `DROPDOWN.OPEN` value from the i18n service.
@@ -221,15 +225,17 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 		this.view.size = this.size;
 		this.elementRef.nativeElement.classList.add(this.buildClass());
 		this.view.select.subscribe(event => {
-			if (this.type === "single") {
-				this.closeMenu();
-				this.dropdownButton.nativeElement.focus();
-			}
 			if (this.type === "multi") {
 				this.propagateChange(this.view.getSelected());
 			} else {
-				if (event.item.selected) {
-					this.propagateChange(event.item);
+				this.closeMenu();
+				this.dropdownButton.nativeElement.focus();
+				if (event.item && event.item.selected) {
+					if (this.value) {
+						this.propagateChange(event.item[this.value]);
+					} else {
+						this.propagateChange(event.item);
+					}
 				} else {
 					this.propagateChange(null);
 				}
@@ -266,12 +272,16 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * @memberof Dropdown
 	 */
 	writeValue(value: any) {
-		if (value) {
-			if (this.type === "single") {
-				this.view.propagateSelected([value]);
+		if (this.type === "single") {
+			if (this.value) {
+				const newValue = Object.assign({}, this.view.items.find(item => item[this.value] === value));
+				newValue.selected = true;
+				this.view.propagateSelected([newValue]);
 			} else {
-				this.view.propagateSelected(value);
+				this.view.propagateSelected([value]);
 			}
+		} else {
+			this.view.propagateSelected(value);
 		}
 	}
 

src/dropdown/dropdown.stories.ts

@@ -1,12 +1,13 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
 import { withNotes } from "@storybook/addon-notes";
 import { action } from "@storybook/addon-actions";
-import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+import { withKnobs, boolean, object, text } from "@storybook/addon-knobs/angular";
 
 import { DropdownModule } from "../";
 
 // needed to init ngx translate and load the translations
 import { BootstrapModule } from "../../.storybook/bootstrap.module";
+import { stringify } from "querystring";
 
 storiesOf("Dropdown", module)
 	.addDecorator(
@@ -62,4 +63,26 @@ storiesOf("Dropdown", module)
 			selected: action("Selected fired for multi-select dropdown"),
 			onClose: action("Multi-select dropdown closed")
 		}
-	})));
+	})))
+	.add("With ngModel", () => ({
+		template: `
+		<ibm-dropdown
+			placeholder="Select"
+			[disabled]="disabled"
+			[(ngModel)]="model"
+			value="content">
+			<ibm-dropdown-list [items]="items"></ibm-dropdown-list>
+		</ibm-dropdown>
+		<span>{{model | json}}</span>
+		`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: [
+				{ content: "one" },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			],
+			model: null
+		}
+	}));

src/dropdown/list-item.interface.ts

@@ -44,4 +44,9 @@ export interface ListItem {
 	 * @memberof ListItem
 	 */
 	items?: ListItem[];
+
+	/**
+	 * Allows for any other custom properties to be included in the ListItem
+	 */
+	[x: string]: any;
 }

src/dropdown/list/dropdown-list.component.ts

@@ -218,6 +218,13 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnChan
 		}, 0);
 		this.index = this.items.findIndex(item => item.selected);
 		this.setupFocusObservable();
+		setTimeout(() => {
+			if (this.type === "single") {
+				this.select.emit({ item: this.items.find(item => item.selected) });
+			} else {
+				this.select.emit(this.getSelected() || []);
+			}
+		});
 	}
 
 	/**