chore(select): Address comments-4 #5911

Author: IvayloG

projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts

@@ -4,13 +4,11 @@ import { fadeOut, fadeIn } from '../animations/main';
 import { IgxSelectBase } from './select.common';
 import { isIE } from '../core/utils';
 import { BaseFitPositionStrategy } from '../services/overlay/position/base-fit-position-strategy';
-import { DisplayDensity } from '../core/density';
 
 /** @hidden @internal */
 export class SelectPositioningStrategy extends BaseFitPositionStrategy implements IPositionStrategy {
 
     private _selectDefaultSettings = {
-        target: this.select.getEditElement().getBoundingClientRect().top, // ** Use top target here and top item for positioning bellow **
         horizontalDirection: HorizontalAlignment.Right,
         verticalDirection: VerticalAlignment.Bottom,
         horizontalStartPoint: HorizontalAlignment.Left,
@@ -74,14 +72,14 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
     public itemIsInvisible(selectFit: SelectFit) {
         // selected item is completely invisible
         return Math.round(selectFit.itemRect.top * 100) / 100 >=
-        Math.round(selectFit.dropDownList.getBoundingClientRect().bottom * 100) / 100 ||
+        Math.round(this.select.scrollContainer.getBoundingClientRect().bottom * 100) / 100 ||
         Math.round(selectFit.itemRect.bottom * 100) / 100 <=
-        Math.round(selectFit.dropDownList.getBoundingClientRect().top * 100) / 100 ||
+        Math.round(this.select.scrollContainer.getBoundingClientRect().top * 100) / 100 ||
         // selected item is partially invisible at ddl bottom
         Math.round(selectFit.itemRect.top * 100) / 100 <=
-        (selectFit.dropDownList.getBoundingClientRect().bottom * 100) / 100 &&
+        (this.select.scrollContainer.getBoundingClientRect().bottom * 100) / 100 &&
         Math.round(selectFit.itemRect.bottom * 100) / 100 >=
-        (selectFit.dropDownList.getBoundingClientRect().bottom * 100) / 100;
+        (this.select.scrollContainer.getBoundingClientRect().bottom * 100) / 100;
     }
 
     private manageScrollToItem(selectFit: SelectFit) {
@@ -96,10 +94,10 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
         const itemPosition = this.calculateScrollPosition(selectFit);
         if (isIE()) {
             setTimeout(() => {
-                selectFit.dropDownList.scrollTop = (itemPosition);
+                this.select.scrollContainer.scrollTop = (itemPosition);
             }, 1);
         } else {
-            selectFit.dropDownList.scrollTop = (itemPosition);
+            this.select.scrollContainer.scrollTop = (itemPosition);
         }
         return itemPosition;
     }
@@ -110,7 +108,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
         }
 
         const elementRect = selectFit.itemRect;
-        const parentRect = selectFit.dropDownList.getBoundingClientRect();
+        const parentRect = this.select.scrollContainer.getBoundingClientRect();
         const scrollPosition = elementRect.bottom - parentRect.bottom;
         return Math.floor(scrollPosition);
     }
@@ -164,22 +162,20 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
     private calculateVariables(selectFit: SelectFit) {
         selectFit.itemRect = this.getInteractionItemElement().getBoundingClientRect();
         selectFit.itemElement = this.getInteractionItemElement();
-        selectFit.dropDownList = this.select.scrollContainer;
-        selectFit.inputElement = this.select.getEditElement();
-    }
+      }
 
     public calculateStyles(selectFit: SelectFit): SelectStyles  {
         const styles: SelectStyles = {};
-        const inputFontSize = window.getComputedStyle(selectFit.inputElement).fontSize;
+        const inputFontSize = window.getComputedStyle(this.settings.target as Element).fontSize;
         const numericInputFontSize = parseFloat(inputFontSize);
         const itemFontSize = window.getComputedStyle(selectFit.itemElement).fontSize;
         const numericItemFontSize = parseFloat(itemFontSize);
         const inputTextToInputTop = (selectFit.targetRect.bottom - selectFit.targetRect.top - numericInputFontSize) / 2;
         const itemTextToItemTop = (selectFit.itemRect.height - numericItemFontSize) / 2;
          // Adjust for input top padding
         const negateInputPaddings = (
-                parseFloat(window.getComputedStyle(selectFit.inputElement).paddingTop) -
-                parseFloat(window.getComputedStyle(selectFit.inputElement).paddingBottom)
+                parseFloat(window.getComputedStyle(this.settings.target as Element).paddingTop) -
+                parseFloat(window.getComputedStyle(this.settings.target as Element).paddingBottom)
             ) / 2;
         styles.itemTextToInputTextDiff = Math.ceil(itemTextToItemTop - inputTextToInputTop + negateInputPaddings);
 
@@ -224,21 +220,6 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
 }
 
 export interface SelectFit extends ConnectedFit {
-    contentElementRect?: ClientRect;
-    targetRect?: ClientRect;
-    viewPortRect?: ClientRect;
-    fitHorizontal?: boolean;
-    fitVertical?: boolean;
-    left?: number;
-    right?: number;
-    top?: number;
-    bottom?: number;
-    horizontalOffset?: number;
-    verticalOffset?: number;
-
-    // New properties
-    inputElement?: HTMLElement;
-    dropDownList?: HTMLElement;
     itemElement?: HTMLElement;
     itemRect?: ClientRect;
     styles?: SelectStyles;
@@ -249,7 +230,6 @@ export interface SelectStyles {
     itemTextIndent?: number;
     itemTextToInputTextDiff?: number;
     contentElementNewWidth?: number;
-    displayDensity?: DisplayDensity | string;
     numericLeftPadding?: number;
 }
 

projects/igniteui-angular/src/lib/select/select.common.ts

@@ -11,6 +11,5 @@ export interface IgxSelectBase extends IgxDropDownBaseDirective {
     toggle(overlaySettings?: OverlaySettings);
     calculateScrollPosition(item: IgxDropDownItemBaseDirective): number;
     getFirstItemElement(): HTMLElement;
-    getListItemsContainer(): HTMLElement;
     getEditElement(): HTMLElement; // returns input HTMLElement
 }

projects/igniteui-angular/src/lib/select/select.component.ts

@@ -312,11 +312,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
         return this.children.first.element.nativeElement;
     }
 
-    /** @hidden @internal */
-    public getListItemsContainer(): HTMLElement {
-        return this.getFirstItemElement().parentElement;
-    }
-
     /**
      * Opens the select
      *

projects/igniteui-angular/src/lib/services/overlay/position/base-fit-position-strategy.ts

@@ -7,12 +7,11 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
 
     /** @inheritdoc */
     position(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean): void {
-        const targetRect = super.calculateElementRectangles(contentElement).targetRect;
-        const contentElementRect = contentElement.getBoundingClientRect();
+        const rects = super.calculateElementRectangles(contentElement);
         const connectedFit: ConnectedFit = {};
         if (initialCall) {
-            connectedFit.targetRect = targetRect;
-            connectedFit.contentElementRect = contentElementRect;
+            connectedFit.targetRect = rects.targetRect;
+            connectedFit.contentElementRect = rects.elementRect;
             this._initialSettings = this._initialSettings || Object.assign({}, this.settings);
             this.settings = Object.assign({}, this._initialSettings);
             connectedFit.viewPortRect = Util.getViewportRect(document);
@@ -21,7 +20,7 @@ export abstract class BaseFitPositionStrategy extends ConnectedPositioningStrate
                 this.fitInViewport(contentElement, connectedFit);
             }
         }
-        this.setStyle(contentElement, targetRect, contentElementRect, connectedFit);
+        this.setStyle(contentElement, rects.targetRect, rects.elementRect, connectedFit);
     }
 
     /**