fix: (platform) Fixing styles for input auto-complete example (#3192)

* Fixing styles for input auto-complete example * Changing <a> to <span> * Fixing issues with typeahead popover * Fixing auto-complete example. * Update platform-input-auto-complete-validation-example.component.html * Update platform-input-auto-complete-validation-example.component.html
SAP · Sep 17, 2020 · 366523d · 366523d
1 parent 9f8b22d
commit 366523d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 44 deletions.
diff --git a/...put/platform-input-example/platform-input-auto-complete-validation-example.component.html b/...put/platform-input-example/platform-input-auto-complete-validation-example.component.html
@@ -1,35 +1,31 @@
 <div>
-    <fd-popover class="fd-popover" [isOpen]="open">
+    <fd-popover class="fd-popover" [triggers]="[]" [isOpen]="open" #typeahead>
         <fd-popover-control>
             <fdp-input
-                [type]="'text'"
-                [id]="'form-input-7'"
-                [name]="'autoCompletTextInput'"
-                [placeholder]="'Enter the sport name'"
+                type="text"
+                id="form-input-7"
+                name="autoCompletTextInput"
+                placeholder="Enter the sport name"
                 [(ngModel)]="inputText"
                 (input)="onSearchChange()"
-                [ariaLabel]="'Input with Auto complete'"
+                ariaLabel="Input with Auto complete"
             >
             </fdp-input>
         </fd-popover-control>
-        <fd-popover-body *ngIf="options && options.length">
-            <ng-container [ngTemplateOutlet]="menuTemplate"> </ng-container>
+        <fd-popover-body>
+            <nav class="fd-menu">
+                <ul fd-menu-list class="fd-menu__list">
+                    <li fd-menu-list-item
+                        class="fd-menu__item"
+                        *ngFor="let option of options"
+                        (click)="onItemClick(option)"
+                        >
+                        <span class="fd-menu__link">
+                            {{ option }}
+                        </span>
+                    </li>
+                </ul>
+            </nav>
         </fd-popover-body>
     </fd-popover>
 </div>
-<ng-template #menuTemplate>
-    <div *ngIf="!itemTemplate" class="fd-popover__body fd-popover__body--no-arrow">
-        <nav class="fd-menu">
-            <ul fd-menu-list class="fd-menu__list">
-                <li
-                    fd-menu-list-item
-                    class="fd-menu__item"
-                    *ngFor="let option of options"
-                    (click)="onItemClick(option)"
-                >
-                    {{ option }}
-                </li>
-            </ul>
-        </nav>
-    </div>
-</ng-template>
diff --git a/...input/platform-input-example/platform-input-auto-complete-validation-example.component.ts b/...input/platform-input-example/platform-input-auto-complete-validation-example.component.ts
@@ -1,16 +1,19 @@
-import { Component, OnInit, TemplateRef, Input } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { PopoverComponent } from '@fundamental-ngx/core';
 
 @Component({
     selector: 'fdp-platform-input-auto-complete-form-validation-example',
     templateUrl: './platform-input-auto-complete-validation-example.component.html',
     styleUrls: ['./platform-input-auto-complete-validation-example.component.scss']
 })
 export class PlatformInputAutoCompleteValidationExampleComponent implements OnInit {
-    submitted = false;
-    inputText: string;
-    state = false;
-    options: string[];
+
+    public inputText: string;
+    public options: string[];
+
+    /** Whether the combobox is opened. */
+    public open: boolean;
+
 
     public sportsData: string[] = [
         'American Football',
@@ -25,36 +28,32 @@ export class PlatformInputAutoCompleteValidationExampleComponent implements OnIn
         'Tennis'
     ];
 
-    /** Whether the combobox is opened. */
-    @Input()
-    open: boolean;
-
-    /**
-     * The template with which to display the individual listed items.
-     * Use it by passing an ng-template with implicit content. See examples for more info.
-     */
-    @Input()
-    itemTemplate: TemplateRef<any>;
+    @ViewChild('typeahead')
+    typeahead: PopoverComponent;
 
-    constructor(private fb: FormBuilder) {}
+    constructor() {}
 
     ngOnInit(): void {
-        this.options = this.sportsData;
+        this.options = [];
     }
 
     filter(value: string): string[] {
         const filterValue = value.toLowerCase();
+        if (filterValue.length === 0) {
+            return [];
+        }
         return this.sportsData.filter((item: string) => item.toLowerCase().includes(filterValue));
     }
 
     onSearchChange(): void {
         this.options = this.filter(this.inputText);
-        this.open = true;
+        this.open = (this.options.length > 0);
+        this.typeahead.updatePopover();
     }
 
     onItemClick(clickedValue): void {
         this.inputText = clickedValue;
-        this.options = this.filter(this.inputText);
+        this.options = [];
         this.open = false;
     }
 }