feat: combobox improvements (#668)

* preliminary popper fixing

* most popover bugs fixed

* one quick fix

* documentation fixes, improvements

* added inputs, doesn't work yet

* try to get github to get ci status

* fixed callback issue

* fixed docs

docs/modules/documentation/containers/combobox-input/combobox-input-docs.component.html

@@ -3,7 +3,7 @@
     The combobox input component is an opinionated composition of the "input-group" and "popover" components to
     accomplish the UI pattern for a typical input dropdown, also known as combobox input.
 </description>
-<import module="ComboboxInputModule" path="fundamental/combobox-input/combobox-input.module"></import>
+<import module="ComboboxInputModule" path="fundamental-ngx"></import>
 <separator></separator>
 
 <h1>&lt;fd-combobox-input&gt;</h1>
@@ -15,6 +15,8 @@ <h1>&lt;fd-combobox-input&gt;</h1>
     { name: 'dropdownValues', description: 'An array of objects, each containing a (string) \'text\' and (Function) \'callback\' property. The callback function is executed when the item is clicked.' },
     { name: 'disabled', description: 'Boolean, disables the input.'},
     { name: 'placeholder', description: 'Placeholder for the input.'},
+    { name: 'fillOnSelect', description: 'Boolean, whether to automatically fill the input with the selected value. Defaults to true.' },
+    { name: 'closeOnSelect', description: 'Boolean, whether to automatically close the popover when a value is selected. Defaults to true.' },
     { name: 'compact', description: 'Boolean, set to \'true\' for the compact combobox input.'}
   ]
 }"></properties>

docs/modules/documentation/containers/search-input/examples/search-input-dynamic-example.component.ts

@@ -11,12 +11,12 @@ export class SearchInputDynamicExampleComponent {
     selected: string;
 
     dropdownValues = [
-        { text: 'Apple' },
-        { text: 'Banana' },
-        { text: 'Kiwi' },
-        { text: 'Strawberry' },
-        { text: 'Tomato' },
-        { text: 'Pineapple' }
+        { text: 'Apple', callback: () => {alert('Apple Clicked!')} },
+        { text: 'Banana', callback: () => {alert('Banana Clicked!')} },
+        { text: 'Kiwi', callback: () => {alert('Kiwi Clicked!')} },
+        { text: 'Strawberry', callback: () => {alert('Strawberry Clicked!')} },
+        { text: 'Tomato', callback: () => {alert('Tomato Clicked!')} },
+        { text: 'Pineapple', callback: () => {alert('Pineapple Clicked!')} }
     ];
 
     dropdownSubject = this.dropdownValues;

docs/modules/documentation/containers/search-input/search-input-docs.component.html

@@ -19,6 +19,8 @@ <h1>&lt;fd-search-input&gt;</h1>
     { name: 'compact', description: 'Boolean, set to \'true\' for the compact search input.'},
     { name: 'glyph', description: 'String, use to select what icon appears in the button. Defaults to search.' },
     { name: 'highlight', description: 'Boolean, whether to highlight the search term in the results, if it is included. Defaults to true.' },
+    { name: 'fillOnSelect', description: 'Boolean, whether to automatically fill the input with the selected value. Defaults to true.' },
+    { name: 'closeOnSelect', description: 'Boolean, whether to automatically close the popover when a value is selected. Defaults to true.' },
     { name: 'usingCustomFilter', description: 'Boolean, whether you are handling the filtration by yourself, or allowing the built-in pipe to do it. Defaults to false.' }
   ],
   outputs: [

library/src/lib/combobox-input/combobox-input.component.html

@@ -28,7 +28,7 @@
                 <ul fd-menu-list>
                     <li fd-menu-item
                         *ngFor="let term of dropdownValues | fdSearch:inputText"
-                        (click)="term.callback($event)"
+                        (click)="onMenuClickHandler($event, term)"
                         (keypress)="onMenuKeypressHandler($event, term)">
                         <a
                            tabindex="0"><strong>{{inputText}}</strong>{{inputText && inputText.length ? term.text.substr(inputText.length) : term.text}}</a>

library/src/lib/date-picker/date-picker.component.ts

@@ -4,10 +4,10 @@ import {
     OnInit,
     HostListener,
     ElementRef,
+    EventEmitter,
+    Output,
     forwardRef,
     HostBinding,
-    Output,
-    EventEmitter,
     OnDestroy
 } from '@angular/core';
 import { CalendarDay, CalendarType } from '../calendar/calendar.component';

library/src/lib/search-input/search-input.component.ts

@@ -1,16 +1,13 @@
 import {
     Component,
-    ElementRef,
     EventEmitter,
     forwardRef, HostBinding,
     Input,
-    OnInit,
     Output,
     Pipe,
     PipeTransform
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { PopperOptions } from 'popper.js';
 
 @Component({
     selector: 'fd-search-input',
@@ -24,7 +21,7 @@ import { PopperOptions } from 'popper.js';
         }
     ]
 })
-export class SearchInputComponent implements ControlValueAccessor, OnInit {
+export class SearchInputComponent implements ControlValueAccessor {
     @Input()
     dropdownValues: any[];
 
@@ -52,6 +49,12 @@ export class SearchInputComponent implements ControlValueAccessor, OnInit {
     @Input()
     highlight: boolean = true;
 
+    @Input()
+    closeOnSelect: boolean = true;
+
+    @Input()
+    fillOnSelect: boolean = true;
+
     @Output()
     itemClicked = new EventEmitter<any>();
 
@@ -82,8 +85,9 @@ export class SearchInputComponent implements ControlValueAccessor, OnInit {
     onMenuClickHandler(event, term) {
         if (term.callback) {
             term.callback(event);
+            this.handleClickActions(term);
+            this.itemClicked.emit(term);
         }
-        this.itemClicked.emit(term);
     }
 
     shellbarSearchInputClicked(event) {
@@ -114,8 +118,14 @@ export class SearchInputComponent implements ControlValueAccessor, OnInit {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    private handleClickActions(term): void {
+        if (this.closeOnSelect) {
+            this.isOpen = false;
+        }
 
-    ngOnInit() {
+        if (this.fillOnSelect) {
+            this.inputText = term.text;
+        }
     }
 }