fix(image-select): fix the positioning for dropdown panel

acrodata · May 6, 2024 · 8a969f7 · 8a969f7
1 parent c9cc8fc
commit 8a969f7
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 16 deletions.
diff --git a/projects/dev-app/src/app/controls/controls.component.html b/projects/dev-app/src/app/controls/controls.component.html
@@ -11,7 +11,10 @@
 </gui-field-group>
 
 <gui-field-group>
-  <gui-image-select />
+  <gui-image-select [config]="{options:[
+    {label:'A',value:1,src:'https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg'},
+    {label:'B',value:2,src:'https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg'}
+    ]}" />
 </gui-field-group>
 
 <gui-field-group>

diff --git a/projects/gui/gui-form.html b/projects/gui/gui-form.html
@@ -54,7 +54,7 @@
     </gui-field-group>
     <!-- Image Select -->
     <gui-field-group *ngSwitchCase="'imageSelect'" [config]="item" [flex]="item.col">
-      <gui-image-select [formControlName]="item.key" [config]="item" />
+      <gui-image-select [formControlName]="item.key" [config]="item" [appendTo]="'#'+uid" />
     </gui-field-group>
     <!-- Textarea -->
     <gui-field-group *ngSwitchCase="'textarea'" [config]="item" [flex]="item.col">

diff --git a/projects/gui/gui-form.ts b/projects/gui/gui-form.ts
@@ -15,12 +15,15 @@ import { Subscription, mergeWith, of } from 'rxjs';
 import { compareValues, getValueByPath } from './gui-utils';
 import { GuiCondition, GuiControl, GuiFieldType, GuiFields, GuiTabsMode } from './interface';
 
+let nextUniqueId = 0;
+
 @Component({
   selector: 'gui-form',
   templateUrl: './gui-form.html',
   styleUrls: ['./gui-form.scss'],
   host: {
-    class: 'gui-form',
+    '[attr.id]': 'uid',
+    'class': 'gui-form',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -52,6 +55,9 @@ export class GuiForm implements OnChanges, OnInit, OnDestroy {
 
   controlSubscriptions: Subscription[] = [];
 
+  // Unique id for this form
+  uid = `gui-form-${nextUniqueId++}`;
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['config']) {
       this.form.controls = {}; // reset controls

diff --git a/projects/gui/image-select/image-select.scss b/projects/gui/image-select/image-select.scss
@@ -7,8 +7,6 @@
 }
 
 .gui-image-select {
-  position: relative;
-
   .ng-select {
     padding: 0 8px;
     margin: 0 -8px;
@@ -30,7 +28,7 @@
     }
   }
 
-  .ng-dropdown-panel {
+  &.ng-dropdown-panel {
     .ng-dropdown-panel-items {
       .ng-option {
         display: flex;

diff --git a/projects/gui/image-select/image-select.ts b/projects/gui/image-select/image-select.ts
@@ -1,23 +1,23 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   forwardRef,
   Input,
+  ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MtxSelect } from '@ng-matero/extensions/select';
 import { GuiControl } from '../interface';
 
-let nextUniqueId = 0;
-
 @Component({
   selector: 'gui-image-select',
   templateUrl: './image-select.html',
   styleUrls: ['./image-select.scss'],
   host: {
-    '[attr.id]': 'uid',
-    'class': 'gui-field gui-image-select',
+    class: 'gui-field gui-image-select',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -29,14 +29,12 @@ let nextUniqueId = 0;
     },
   ],
 })
-export class GuiImageSelect implements ControlValueAccessor {
+export class GuiImageSelect implements ControlValueAccessor, AfterViewInit {
+  @ViewChild(MtxSelect) mtxSelect!: MtxSelect;
+
   @Input() config: Partial<GuiControl> = {};
   @Input() disabled = false;
-
-  // Unique id for this select
-  uid = `gui-image-select-${nextUniqueId++}`;
-  // The dropdown panel should be appended to the host element
-  @Input() appendTo = `#${this.uid}`;
+  @Input() appendTo = 'body';
 
   value: unknown;
 
@@ -45,6 +43,12 @@ export class GuiImageSelect implements ControlValueAccessor {
 
   constructor(private cdr: ChangeDetectorRef) {}
 
+  ngAfterViewInit(): void {
+    // Add additional class for ng-select's dropdown panel
+    const { ngSelect } = this.mtxSelect;
+    ngSelect.classes = (ngSelect.classes || '') + ' gui-image-select';
+  }
+
   writeValue(value: unknown) {
     this.value = value;
     this.cdr.markForCheck();