fix: (platform) combobox width, custom template and groupKey issues (#…

…3527)
SAP · Oct 2, 2020 · 35479b7 · 35479b7
1 parent c3abc60
commit 35479b7
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 12 deletions.
diff --git a/...ponent-docs/platform-combobox/examples/combobox-group/combobox-group-example.component.ts b/...ponent-docs/platform-combobox/examples/combobox-group/combobox-group-example.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+
 import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
 
 @Component({

diff --git a/...s/platform-combobox/examples/combobox-templates/combobox-templates-example.component.html b/...s/platform-combobox/examples/combobox-templates/combobox-templates-example.component.html
@@ -11,7 +11,7 @@
             <ng-template fdTemplate="optionItemTemplate" let-item let-index="index">
                 <div class="fd-template-container-div">
                     <fd-icon glyph="accept" class="fd-template-icon"></fd-icon>
-                    <span [innerText]="item.name"></span>
+                    <span class="fd-template-text" [innerText]="item.name"></span>
                 </div>
             </ng-template>
         </fdp-combobox>

diff --git a/...ocs/platform-combobox/examples/combobox-templates/combobox-templates-example.component.ts b/...ocs/platform-combobox/examples/combobox-templates/combobox-templates-example.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+
 import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
 
 @Component({
@@ -7,8 +8,7 @@ import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform';
     changeDetection: ChangeDetectionStrategy.OnPush,
     styles: [
         '.fd-template-container-div { display: flex; align-items: center; cursor: pointer;}',
-        '.fd-template-container-div:hover { background-color: var(--fd-color-background-hover); }',
-        '.fd-template-icon { margin-right: 12px; }'
+        '.fd-template-text { margin-right: 12px; margin-left: 12px; }'
     ]
 })
 export class ComboboxTemplatesExampleComponent {

diff --git a/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.html b/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.html
@@ -24,7 +24,6 @@
 
 <ng-template #controlTemplate>
     <fd-input-group
-        style="display: inline-block"
         [compact]="isCompact"
         [button]="!readonly"
         [glyph]="!readonly ? 'navigation-down-arrow' : ' '"

diff --git a/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.scss b/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.scss
@@ -4,6 +4,10 @@
             width: 100% !important;
             position: static !important;
             overflow: hidden;
+
+            .fd-list--dropdown {
+                max-width: 100%;
+            }
         }
     }
 

diff --git a/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.ts b/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.ts
@@ -111,7 +111,6 @@ export class ComboboxComponent extends BaseCombobox implements OnInit, AfterView
                 .subscribe(() => this._connectedOverlay.overlayRef.setDirection(this._direction));
         }
 
-
         if (this.mobile) {
             this._setUpMobileMode();
         }
@@ -221,7 +220,9 @@ export class ComboboxComponent extends BaseCombobox implements OnInit, AfterView
             return;
         }
 
-        this._updateModel(modelValue.value);
+        const optionItem = this._getSelectedOptionItem(this.inputText);
+
+        this._updateModel(optionItem ? optionItem.value : this.inputText);
     }
 
     /** @hidden

diff --git a/...s/form/input-message-group-with-template/input-message-group-with-template.component.scss b/...s/form/input-message-group-with-template/input-message-group-with-template.component.scss
@@ -1,19 +1,21 @@
 //@import '~fundamental-styles/dist/form-input-message-group';
 
 .fd-popover-container-custom--message {
-  flex-grow: 1;
+    flex-grow: 1;
 }
 
 .fd-popover-container-custom {
-  border: none;
+    border: none;
 }
 
 // when disabled, this class adds the grabber cursor type on textarea. Overriding it to auto instead of pointer.
 .fd-popover__control {
-  cursor: auto !important;
+    cursor: auto !important;
 }
 
 // the default style display:inline-block is restricting/shrinking the width, therefore we are overriding it to take flex width.
-.fd-popover-custom {
-  display: flex;
-}
+fdp-input-message-group {
+    .fd-popover-custom {
+        display: flex;
+    }
+}