Merge pull request #4772 from IgniteUI/fix-#4752-7.4.x

fix(input-group): some japanese symbols don't fit the input box

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -566,8 +566,6 @@
         display: block;
         border: none;
         height: rem(32px, map-get($base-scale-size, 'comfortable'));
-        padding: 0 0 rem(8px, map-get($base-scale-size, 'comfortable'));
-        border-top: rem(8px, map-get($base-scale-size, 'comfortable')) solid rgba(0, 0, 0, 0);
         line-height: 0 !important; /* resets typography styles */
         width: 100%;
         min-width: 0;
@@ -589,15 +587,11 @@
 
     %form-group-input--cosy {
         height: rem(32px, map-get($base-scale-size, 'cosy'));
-        padding: 0 0 rem(8px, map-get($base-scale-size, 'cosy'));
-        border-top: rem(8px, map-get($base-scale-size, 'cosy')) solid rgba(0, 0, 0, 0);
     }
 
     %form-group-input--compact {
         font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact'));
         height: rem(32px, map-get($base-scale-size, 'compact'));
-        padding: 0 0 rem(8px, map-get($base-scale-size, 'compact'));
-        border-top: rem(8px, map-get($base-scale-size, 'compact')) solid rgba(0, 0, 0, 0);
     }
 
     %chrome-autofill-fix {

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

@@ -37,25 +37,25 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
     private deltaX: number;
     private itemTextPadding: number;
     private itemTextIndent: number;
-    private inputBorderTop: number;
     private listContainerBoundRect: DOMRect;
+    private itemTextToInputTextDiff: number;
 
     private positionAndScrollBottom(contentElement: HTMLElement, outBoundsAmount: number) {
         contentElement.style.top = `${this.viewPort.bottom - this.listContainerBoundRect.height - this.defaultWindowToListOffset}px`;
-        contentElement.firstElementChild.scrollTop -= outBoundsAmount - (this.inputBorderTop - this.defaultWindowToListOffset);
+        contentElement.firstElementChild.scrollTop -= outBoundsAmount - (this.defaultWindowToListOffset);
         this.deltaY = this.viewPort.bottom - this.listContainerBoundRect.height -
             this.defaultWindowToListOffset - (this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top;
     }
 
     private positionNoScroll(contentElement: HTMLElement, CURRENT_POSITION_Y: number) {
-        contentElement.style.top = `${CURRENT_POSITION_Y - this.inputBorderTop}px`;
-        this.deltaY = CURRENT_POSITION_Y - this.inputBorderTop -
-            (this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top;
+        contentElement.style.top = `${CURRENT_POSITION_Y - this.itemTextToInputTextDiff }px`;
+        this.deltaY = CURRENT_POSITION_Y -
+            (this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top - this.itemTextToInputTextDiff;
     }
 
     private positionAndScrollTop(contentElement: HTMLElement, outBoundsAmount: number) {
         contentElement.style.top = `${this.viewPort.top + this.defaultWindowToListOffset}px`;
-        contentElement.firstElementChild.scrollTop += outBoundsAmount + this.inputBorderTop + this.defaultWindowToListOffset;
+        contentElement.firstElementChild.scrollTop += outBoundsAmount + this.itemTextToInputTextDiff + this.defaultWindowToListOffset;
         this.deltaY = this.viewPort.top + this.defaultWindowToListOffset -
             (this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top;
     }
@@ -140,6 +140,14 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
         const itemTopListOffset = itemBoundRect.top - this.listContainerBoundRect.top;
         const itemHeight = itemBoundRect.height;
 
+        const inputFontSize = window.getComputedStyle(inputElement).fontSize;
+        const numericInputFontSize = parseInt(inputFontSize.slice(0, inputFontSize.indexOf('p')), 10) || 0;
+        const itemFontSize = window.getComputedStyle(itemElement).fontSize;
+        const numericItemFontSize = parseInt(itemFontSize.slice(0, itemFontSize.indexOf('p')), 10) || 0;
+        const inputTextToInputTop = (inputHeight - numericInputFontSize) / 2;
+        const itemTextToItemTop = (itemHeight - numericItemFontSize) / 2;
+        this.itemTextToInputTextDiff = itemTextToItemTop - inputTextToInputTop;
+
         let CURRENT_POSITION_Y = START.Y - itemTopListOffset;
         const CURRENT_BOTTOM_Y = CURRENT_POSITION_Y + this.listContainerBoundRect.height;
 
@@ -155,17 +163,15 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
                 CURRENT_POSITION_Y += START.Y;
             }
         }
-        const inputBorderTop = window.getComputedStyle(inputElement).borderTopWidth;
-        this.inputBorderTop = parseInt(inputBorderTop.slice(0, inputBorderTop.indexOf('p')), 10) || 0;
         const itemLeftPadding = window.getComputedStyle(itemElement).paddingLeft;
         const itemTextIndent = window.getComputedStyle(itemElement).textIndent;
-        const numericPadding = parseInt(itemLeftPadding.slice(0, itemLeftPadding.indexOf('p')), 10) || 0;
+        const numericLeftPadding = parseInt(itemLeftPadding.slice(0, itemLeftPadding.indexOf('p')), 10) || 0;
         const numericTextIndent = parseInt(itemTextIndent.slice(0, itemTextIndent.indexOf('r')), 10) || 0;
-        this.itemTextPadding = numericPadding;
+        this.itemTextPadding = numericLeftPadding;
         this.itemTextIndent = numericTextIndent;
-        contentElement.style.left += `${START.X - numericPadding - numericTextIndent}px`;
+        contentElement.style.left += `${START.X - numericLeftPadding - numericTextIndent}px`;
         contentElement.style.width = inputRect.width + 24 + 32 + 'px';
-        this.deltaX = START.X - numericPadding - numericTextIndent;
+        this.deltaX = START.X - numericLeftPadding - numericTextIndent;
         const currentScroll = this.getItemsOutOfView(contentElement, itemHeight)['currentScroll'];
         const remainingScroll = this.getItemsOutOfView(contentElement, itemHeight)['remainingScroll'];