fix(table search): add NG_VALUE_ACCESSOR to component metadata

UjjwalUpadhyay123-bit · Jul 13, 2020 · 338e60c · 338e60c
1 parent a62a10d
commit 338e60c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/table/table.stories.ts b/src/table/table.stories.ts
@@ -188,7 +188,11 @@ storiesOf("Components|Table", module).addDecorator(
 					</button>
 				</ibm-table-toolbar-actions>
 				<ibm-table-toolbar-content>
-					<ibm-table-toolbar-search [expandable]="true"></ibm-table-toolbar-search>
+					<ibm-table-toolbar-search
+						ngDefaultControl
+						[expandable]="true"
+						[(ngModel)]="searchModel">
+					</ibm-table-toolbar-search>
 					<button ibmButton="ghost" class="toolbar-action" [tabindex]="toolbar.selected ? -1 : 0">
 						<ibm-icon-settings size="16" class="bx--toolbar-action__icon"></ibm-icon-settings>
 					</button>
@@ -214,6 +218,7 @@ storiesOf("Components|Table", module).addDecorator(
 	`,
 		props: getProps({
 			description: text("Description", "With toolbar"),
+			searchModel: text("Search model", "Initial search value"),
 			enableSingleSelect: boolean("Enable single select", false),
 			batchText: object("Toolbar batch text", {
 				SINGLE: "1 item selected",

diff --git a/src/table/toolbar/table-toolbar-search.component.ts b/src/table/toolbar/table-toolbar-search.component.ts
@@ -3,14 +3,23 @@ import {
 	Component,
 	HostBinding,
 	Input,
-	OnInit
+	OnInit,
+	AfterViewInit
 } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 @Component({
 	selector: "ibm-table-toolbar-search",
-	templateUrl: "../../search/search.component.html"
+	templateUrl: "../../search/search.component.html",
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: TableToolbarSearch,
+			multi: true
+		}
+	]
 })
-export class TableToolbarSearch extends Search implements OnInit {
+export class TableToolbarSearch extends Search implements OnInit, AfterViewInit {
 	tableSearch = true;
 
 	@HostBinding("class.bx--toolbar-search-container-expandable") @Input() expandable = false;
@@ -27,4 +36,12 @@ export class TableToolbarSearch extends Search implements OnInit {
 			this.toolbar = true;
 		}
 	}
+
+	ngAfterViewInit() {
+		setTimeout(() => {
+			if (this.value) {
+				this.openSearch();
+			}
+		});
+	}
 }