fix: (Core) issues on Popover related components (#3723)

* fix: apply proper sizing strategy to popover related components

* remove code leftovers

* Change documentation

* open multi input on search term change

* remove leftover

* add tests

* Change docs, add border-radius

* add control limit to 100% width

* fix IE11 multi input

* add underscore prefix for hidden value

* PR comments

* add stronger seletor, to have 100% width on multiinput

* correct documentation, change PopoverFillMode default to fit-content

apps/docs/src/app/core/component-docs/combobox/examples/combobox-columns-example.component.html

@@ -7,7 +7,7 @@
     [(ngModel)]="searchTerm">
 </fd-combobox>
 
-<small>Search Term: {{ searchTerm }}</small>
+<small style="display: block;">Search Term: {{ searchTerm }}</small>
 
 <ng-template #columnTemplate let-item>
     <span fd-list-title>{{ item.name }}</span>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-displaywith-example.component.html

@@ -5,4 +5,4 @@
     [(ngModel)]="searchTerm">
 </fd-combobox>
 
-<small>Search Term: {{ searchTerm }}</small>
+<small style="display: block;">Search Term: {{ searchTerm }}</small>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-dynamic-example.component.html

@@ -6,6 +6,5 @@
     (ngModelChange)="selectItem($event)">
 </fd-combobox>
 
-<small>Selected: {{ selected }}</small>
-<br/>
-<small>Selected Index: {{ selectedIndex }}</small>
+<small style="display: block;">Selected: {{ selected }}</small>
+<small style="display: block;">Selected Index: {{ selectedIndex }}</small>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-group-example.component.html

@@ -7,4 +7,4 @@
     [(ngModel)]="searchTerm">
 </fd-combobox>
 
-<small>Search Term: {{ searchTerm }}</small>
+<small style="display: block;">Search Term: {{ searchTerm }}</small>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-mobile/combobox-mobile-example.component.html

@@ -1,9 +1,8 @@
-<div fd-form-item>
-    <label fd-form-label>Mobile Mode Combobox</label>
-    <fd-combobox placeholder="Search here..."
-                 [mobile]="true"
-                 [dropdownValues]="values"
-                 [mobileConfig]="mobileConfig"
-                 [(ngModel)]="selectedValue">
-    </fd-combobox>
-</div>
+<label fd-form-label>Mobile Mode Combobox</label>
+<br/>
+<fd-combobox placeholder="Search here..."
+             [mobile]="true"
+             [dropdownValues]="values"
+             [mobileConfig]="mobileConfig"
+             [(ngModel)]="selectedValue">
+</fd-combobox>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-search-function-example.component.html

@@ -5,4 +5,4 @@
     [(ngModel)]="searchTerm">
 </fd-combobox>
 
-<small>Search Term: {{ searchTerm }}</small>
+<small style="display: block;">Search Term: {{ searchTerm }}</small>

apps/docs/src/app/core/component-docs/combobox/examples/combobox-template-example.component.html

@@ -7,9 +7,8 @@
     [(ngModel)]="searchTerm"
 ></fd-combobox>
 
-<small>Search Term: {{ searchTerm }}</small>
-<br/>
-<small>Returned from itemClicked Event: {{ selected | json }}</small>
+<small style="display: block;">Search Term: {{ searchTerm }}</small>
+<small style="display: block;">Returned from itemClicked Event: {{ selected | json }}</small>
 
 <!-- Note that in this case you are responsible for highlighting. -->
 <ng-template #template let-item>

apps/docs/src/app/core/component-docs/select/examples/select-adding-example/select-adding-example.component.html

@@ -6,4 +6,4 @@
 <fd-select placeholder="Select an option" [(value)]="selectedValue" [closeOnOutsideClick]="false">
     <fd-option *ngFor="let option of options" [value]="option">{{option}}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue}}</small>
+<small style="display: block;">Selected value: {{selectedValue}}</small>

apps/docs/src/app/core/component-docs/select/examples/select-height/select-max-height-example.component.html

@@ -1,4 +1,4 @@
 <fd-select placeholder="Select an option" [(value)]="selectedValue" [maxHeight]="'250px'">
     <fd-option *ngFor="let option of options" [value]="option">{{option}}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue}}</small>
+<small style="display: block;">Selected value: {{selectedValue}}</small>

apps/docs/src/app/core/component-docs/select/examples/select-mobile-example/select-mobile-example.component.html

@@ -8,4 +8,4 @@
     <fd-option *ngFor="let option of options" [value]="option">{{option}}</fd-option>
 
 </fd-select>
-<small>Selected value: {{selectedValue}}</small>
+<small style="display: block;">Selected value: {{selectedValue}}</small>

apps/docs/src/app/core/component-docs/select/examples/select-mode-example/select-mode-example.component.html

@@ -2,22 +2,22 @@ <h4>Default select</h4>
 <fd-select placeholder="Select an option" [(value)]="selectedValue1">
     <fd-option *ngFor="let option of options" [value]="option">{{ option }}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue1}}</small>
+<small style="display: block;">Selected value: {{selectedValue1}}</small>
 
 <h4>Compact select</h4>
 <fd-select placeholder="Select an option" [compact]="true" [(value)]="selectedValue2">
     <fd-option *ngFor="let option of options" [value]="option">{{ option }}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue2}}</small>
+<small style="display: block;">Selected value: {{selectedValue2}}</small>
 
 <h4>Select in disabled mode</h4>
 <fd-select placeholder="Select an option" [disabled]="true" [(value)]="selectedValue4">
     <fd-option *ngFor="let option of options" [value]="option">{{ option }}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue4}}</small>
+<small style="display: block;">Selected value: {{selectedValue4}}</small>
 
 <h4>Select in read-only mode</h4>
 <fd-select placeholder="Select an option" [readonly]="true" [(value)]="selectedValue5">
     <fd-option *ngFor="let option of options" [value]="option">{{ option }}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue5}}</small>
+<small style="display: block;">Selected value: {{selectedValue5}}</small>

apps/docs/src/app/core/component-docs/select/examples/select-nested-options/select-nested-options.component.html

@@ -1,4 +1,5 @@
 <fd-select [(value)]="selectedValue"
+           [extendedBodyTemplate]="true"
            [controlTemplate]="customSelectTemplate">
 
     <li fd-list-group-header>Fruits</li>
@@ -20,4 +21,4 @@
     </ng-template>
 
 </fd-select>
-<small>Selected value: {{selectedValue | json}}</small>
+<small style="display: block;">Selected value: {{selectedValue | json}}</small>

apps/docs/src/app/core/component-docs/select/examples/select-programmatic-example/select-programmatic-example.component.html

@@ -7,4 +7,4 @@
 <fd-select placeholder="Select value" #select [(value)]="selectedValue" [closeOnOutsideClick]="false">
     <fd-option *ngFor="let option of options" [value]="option">{{option}}</fd-option>
 </fd-select>
-<small>Selected value: {{selectedValue}}</small>
+<small style="display: block;">Selected value: {{selectedValue}}</small>

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

@@ -5,13 +5,12 @@
         additionalBodyClass="fd-popover-custom-list"
         [isOpen]="open && displayedValues && displayedValues.length"
         (isOpenChange)="isOpenChangeHandle($event)"
-        [fillControlMode]="'at-least'"
+        [fillControlMode]="fillControlMode"
         [focusTrapped]="true"
         [triggers]="triggers"
+        [maxWidth]="600"
         [disabled]="disabled || readOnly"
-        [closeOnOutsideClick]="closeOnOutsideClick"
-        class="fd-combobox-popover-custom"
-    >
+        [closeOnOutsideClick]="closeOnOutsideClick">
         <fd-popover-control>
             <ng-container *ngTemplateOutlet="controlTemplate"></ng-container>
         </fd-popover-control>
@@ -24,6 +23,7 @@
 
 <ng-template let-term="term" #itemSource>
     <span
+        fd-list-title
         *ngIf="!itemTemplate"
         [innerHTML]="term | displayFnPipe: displayFn | highlight: inputText:highlighting && filterHighlight"
     >

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

@@ -1,18 +1,9 @@
 .fd-combobox-custom-class {
-    display: block;
-
-    .fd-combobox-popover-custom {
-        display: block;
-    }
+    display: inline-block;
 
     .fd-combobox-shellbar-custom {
         display: inline-block;
     }
-
-    .fd-combobox-custom-list {
-        max-width: 100%;
-    }
-
 }
 
 .fd-combobox-input-menu-overflow {

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

@@ -35,7 +35,8 @@ import { COMBOBOX_COMPONENT, ComboboxInterface } from './combobox.interface';
 import { DynamicComponentService } from '../utils/dynamic-component/dynamic-component.service';
 import { ComboboxMobileComponent } from './combobox-mobile/combobox-mobile.component';
 import { ListComponent } from '../list/list.component';
-import { FocusEscapeDirection } from '../..';
+import { FocusEscapeDirection } from '../utils/services/keyboard-support/keyboard-support.service';
+import { PopoverFillMode } from '../popover/popover-position/popover-position';
 import {
     CONTROL,
     DOWN_ARROW,
@@ -75,7 +76,8 @@ import {
     ],
     host: {
         '[class.fd-combobox-custom-class]': 'true',
-        '[class.fd-combobox-input]': 'true'
+        '[class.fd-combobox-input]': 'true',
+        '[class.fd-combobox-custom-class--mobile]': 'mobile',
     },
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -171,6 +173,15 @@ export class ComboboxComponent implements ComboboxInterface, ControlValueAccesso
     @Input()
     autoComplete = true;
 
+    /**
+     * Preset options for the Select body width, whatever is chosen, the body has a 600px limit.
+     * * `at-least` will apply a minimum width to the body equivalent to the width of the control. - Default
+     * * `equal` will apply a width to the body equivalent to the width of the control.
+     * * 'fit-content' will apply width needed to properly display items inside, independent of control.
+     */
+    @Input()
+    fillControlMode: PopoverFillMode = 'at-least';
+
     /** Defines if combobox should behave same as dropdown. When it's enabled writing inside text input won't
      * trigger onChange function, until it matches one of displayed dropdown values. Also communicating with combobox
      * can be achieved only by objects with same type as dropdownValue */

libs/core/src/lib/datetime-picker/datetime-picker.component.scss

@@ -14,11 +14,6 @@
         align-self: stretch;
     }
 
-    fd-popover {
-        display: block;
-    }
-
-    // Added to fix popper migration style bugs. Should be fixed in fd.
     fd-time {
         width: auto;
     }

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

@@ -83,7 +83,7 @@ export class MenuComponent implements MenuInterface, AfterContentInit, AfterView
      * Preset options for the popover body width.
      * * `at-least` will apply a minimum width to the body equivalent to the width of the control.
      * * `equal` will apply a width to the body equivalent to the width of the control.
-     * * Leave blank for no effect.
+     * * 'fit-content' will apply width needed to properly display items inside, independent of control.
      */
     @Input()
     fillControlMode: PopoverFillMode = 'at-least';

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

@@ -7,6 +7,7 @@
             [isOpen]="open && displayedValues && displayedValues.length"
             (isOpenChange)="openChangeHandle($event)"
             [triggers]="[]"
+            [maxWidth]="600"
             [focusTrapped]="true"
             [disabled]="disabled"
             [fillControlMode]="fillControlMode"
@@ -52,18 +53,17 @@
             >
                 <span [innerHtml]="token | displayFnPipe: displayFn"></span>
             </fd-token>
-            <input (focusin)="tokenizer.inputFocused = true;" (focusout)="tokenizer.inputFocused = false;"
-                   type="text"
+            <input type="text" (focusin)="tokenizer.inputFocused = true;" (focusout)="tokenizer.inputFocused = false;"
                    class="fd-input fd-tokenizer__input fd-multi-input-tokenizer-input"
                    fd-form-control
                    fd-input-group-input
                    #searchInputElement
                    [placeholder]="placeholder"
-                   [(ngModel)]="searchTerm"
+                   [ngModel]="searchTerm"
                    [compact]="compact"
                    [disabled]="disabled"
                    [ngClass]="{ 'fd-input--compact': compact }"
-                   (ngModelChange)="handleSearchTermChange()"
+                   (ngModelChange)="handleSearchTermChange($event)"
                    (keydown)="handleInputKeydown($event)"
                    [ngModelOptions]="{standalone: true}"
             />

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

@@ -25,16 +25,17 @@
     display: block;
 }
 
-.fd-multi-input-popover-custom {
-    display: block;
-    width: 100%;
+.fd-multi-input-popover-custom.fd-popover-custom {
+	max-width: 100%;
+	display: block;
+
     .fd-tokenizer {
         height: 100%;
     }
 }
 
 .fd-multi-input-menu-overflow {
-    max-width: 100%;
+    max-width: 37.5rem;
     overflow: auto;
 
     // TODO: Remove after adjusting in styles

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

@@ -202,12 +202,12 @@ describe('MultiInputComponent', () => {
         component.dropdownValues = ['term1', 'term2', 'value'];
         spyOn(event, 'preventDefault');
         spyOn(event, 'stopPropagation');
-        spyOn(component, 'handleSearchTermChange').and.callThrough();
+        spyOn(<any>component, '_applySearchTermChange').and.callThrough();
         component.showAllClicked(event);
         expect(event.preventDefault).toHaveBeenCalled();
         expect(event.stopPropagation).toHaveBeenCalled();
         expect(component.searchTerm).toBe('');
         expect(component.displayedValues.length).toEqual(component.dropdownValues.length);
-        expect(component.handleSearchTermChange).toHaveBeenCalled();
+        expect((<any>component)._applySearchTermChange).toHaveBeenCalled();
     });
 });