fix: multi-input 0.13.0 bugs (#1828)

* hide empty popover container if displayedValues list length is 0

* disable click event on disabled multiinput, popover should open on input key press, fix tests

* add tests

* no need for extra class

* missed some things

libs/core/src/lib/combobox/combobox.component.html

@@ -1,11 +1,10 @@
-<fd-popover [isOpen]="open"
+<fd-popover [isOpen]="open && displayedValues && displayedValues.length"
             (isOpenChange)="isOpenChangeHandle($event)"
             [fillControlMode]="'at-least'"
             [triggers]="triggers"
             [disabled]="disabled"
             [closeOnOutsideClick]="closeOnOutsideClick"
-            class="fd-combobox-popover-custom"
-            [ngClass]="{'fd-popover-body--display-none': displayedValues && !displayedValues.length}">
+            class="fd-combobox-popover-custom">
     <fd-popover-control>
         <div class="fd-combobox-control">
             <fd-input-group [glyph]="glyph"  [compact]="compact" [button]="true" [state]="state"

libs/core/src/lib/multi-input/multi-input.component.html

@@ -1,5 +1,5 @@
 <div class="fd-multi-input-field">
-    <fd-popover [isOpen]="open"
+    <fd-popover [isOpen]="open && displayedValues && displayedValues.length"
                 (isOpenChange)="openChangeHandle($event)"
                 [triggers]="[]"
                 [disabled]="disabled"

libs/core/src/lib/multi-input/multi-input.component.spec.ts

@@ -61,6 +61,7 @@ describe('MultiInputComponent', () => {
         spyOn(component.searchTermChange, 'emit');
         spyOn(component.popoverRef, 'updatePopover');
         spyOn(component, 'filterFn');
+        spyOn(component, 'openChangeHandle');
         component.ngOnInit();
 
         const text = 'test';
@@ -73,6 +74,7 @@ describe('MultiInputComponent', () => {
         expect(component.searchTermChange.emit).toHaveBeenCalled();
         expect(component.filterFn).toHaveBeenCalled();
         expect(component.popoverRef.updatePopover).toHaveBeenCalled();
+        expect(component.openChangeHandle).toHaveBeenCalledWith(true);
     });
 
     it('should filter dropdown values', async() => {

libs/core/src/lib/multi-input/multi-input.component.ts

@@ -214,6 +214,11 @@ export class MultiInputComponent implements OnInit, ControlValueAccessor, OnChan
     /** @hidden */
     setDisabledState(isDisabled: boolean): void {
         this.disabled = isDisabled;
+        if (isDisabled) {
+            this.elRef.nativeElement.style.pointerEvents = 'none';
+        } else {
+            this.elRef.nativeElement.style.pointerEvents = 'auto';
+        }
         this.changeDetRef.detectChanges();
     }
 
@@ -276,6 +281,9 @@ export class MultiInputComponent implements OnInit, ControlValueAccessor, OnChan
 
     /** @hidden */
     handleSearchTermChange(): void {
+        if (!this.open && this.searchTerm && this.searchTerm.length) {
+            this.openChangeHandle(true);
+        }
         this.searchTermChange.emit(this.searchTerm);
         this.displayedValues = this.filterFn(this.dropdownValues, this.searchTerm);
         this.popoverRef.updatePopover();

libs/core/src/lib/popover/popover.component.spec.ts

@@ -56,5 +56,5 @@ describe('PopoverComponent', () => {
         component.handleKeydown(event);
         expect(component.isOpen).toBe(true);
         expect(component.isOpenChange.emit).toHaveBeenCalledWith(true);
-    })
+    });
 });

libs/core/src/lib/popover/popover.component.ts

@@ -113,7 +113,7 @@ export class PopoverComponent {
     /** Id of the popover. If none is provided, one will be generated. */
     @Input()
     id: string = 'fd-popover-' + popoverUniqueId++;
-
+    
     /**
      * Toggles the popover open state.
      */