Append the ngSelect dropdown to the dialog as it would otherwise be i…

…nvisible behind the dialog

app/views/augmented/_autocomplete_select_decoration.html.erb

@@ -2,9 +2,10 @@
   <%= content_tag :'opce-select-decoration',
                   {},
                   data: {
-                      "multiselect": multiple,
+                      multiple:,
                       "input-name": input_name,
                       "input-id": input_id,
+                      "append-to": defined?(append_to) ? append_to : 'body',
                       key:,
                       options: JSON.dump(select_options),
                   } %>

frontend/src/app/shared/components/autocompleter/autocomplete-select-decoration/autocomplete-select-decoration.component.ts

@@ -27,13 +27,17 @@
 //++
 
 import {
-  Component, ElementRef, OnInit, ViewChild,
+  AfterViewInit,
+  Component,
+  OnInit,
+  ViewChild,
 } from '@angular/core';
 import { NgSelectComponent } from '@ng-select/ng-select';
-import { I18nService } from 'core-app/core/i18n/i18n.service';
-import { HalResource } from 'core-app/features/hal/resources/hal-resource';
-import { IProjectAutocompleterData } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocompleter.component';
 import { IProjectAutocompleteItem } from 'core-app/shared/components/autocompleter/project-autocompleter/project-autocomplete-item';
+import {
+  IAutocompleteItem,
+  OpAutocompleterComponent,
+} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
 
 type SelectItem = { label:string, value:string, selected?:boolean };
 
@@ -44,10 +48,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
     <op-project-autocompleter
       *ngIf="isProjectField()"
       [model]="currentProjectSelection"
-      [multiple]="multiselect"
+      [multiple]="multiple"
       [labelForId]="labelForId"
       (change)="updateProjectSelection($event)"
-      appendTo="body"
+      [appendTo]="appendTo"
     >
     </op-project-autocompleter>
 
@@ -56,10 +60,10 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
       [items]="options"
       [labelForId]="labelForId"
       bindLabel="label"
-      [multiple]="multiselect"
+      [multiple]="multiple"
       [virtualScroll]="true"
       [ngModel]="selected"
-      appendTo="body"
+      [appendTo]="appendTo"
       [placeholder]="text.placeholder"
       (ngModelChange)="updateSelection($event)">
       <ng-template ng-option-tmp let-item="item" let-index="index">
@@ -69,14 +73,11 @@ export const autocompleteSelectDecorationSelector = 'autocomplete-select-decorat
   `,
   selector: autocompleteSelectDecorationSelector,
 })
-export class AutocompleteSelectDecorationComponent implements OnInit {
+export class AutocompleteSelectDecorationComponent extends OpAutocompleterComponent<IAutocompleteItem> implements OnInit, AfterViewInit {
   @ViewChild(NgSelectComponent) public ngSelectComponent:NgSelectComponent;
 
   public options:SelectItem[];
 
-  /** Whether we're a multiselect */
-  public multiselect = false;
-
   /** Get the selected options */
   public selected:SelectItem|SelectItem[];
 
@@ -86,34 +87,26 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
   /** The input name we're syncing selections to */
   private syncInputFieldName:string;
 
-  /** The input id used for label */
-  public labelForId:string;
-
   /** The field key (e.g. status, type, or project)  */
   public key:string;
 
   text = {
     placeholder: this.I18n.t('js.placeholders.selection'),
   };
 
-  constructor(
-    protected elementRef:ElementRef,
-    readonly I18n:I18nService,
-  ) {
-  }
-
   ngOnInit():void {
     const element = this.elementRef.nativeElement as HTMLElement;
 
     // Set options
-    this.multiselect = element.dataset.multiselect === 'true';
-    this.labelForId = element.dataset.inputId!;
+    this.multiple = element.dataset.multiselect === 'true';
+    this.labelForId = element.dataset.inputId;
     this.key = element.dataset.key!;
+    this.appendTo = element.dataset.appendTo;
 
     // Get the sync target
     this.syncInputFieldName = element.dataset.inputName!;
     // Add Rails multiple identifier if multiselect
-    if (this.multiselect) {
+    if (this.multiple) {
       this.syncInputFieldName += '[]';
     }
 
@@ -127,7 +120,7 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
       this.setInitialProjectSelection();
     }
 
-    if (!this.multiselect) {
+    if (!this.multiple) {
       this.selected = (this.selected as SelectItem[])[0];
     }
 
@@ -137,6 +130,11 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
     element.parentElement!.hidden = false;
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
+  ngAfterViewInit():void {
+    // do nothing and prevent the parent hook to be called
+  }
+
   setInitialSelection(data:SelectItem[]):void {
     this.updateSelection(data.filter((element) => element.selected));
   }
@@ -185,7 +183,7 @@ export class AutocompleteSelectDecorationComponent implements OnInit {
     const items = _.castArray(this.selected);
     if (items.length === 0) return;
 
-    if (this.multiselect) {
+    if (this.multiple) {
       this.currentProjectSelection = items.map((item:SelectItem) => ({
         id: item.value,
         name: item.label,

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.ts

@@ -195,7 +195,7 @@ export class OpAutocompleterComponent<T extends IAutocompleteItem = IAutocomplet
 
   @Input() public clearOnBackspace?:boolean = true;
 
-  @Input() public labelForId ? = null;
+  @Input() public labelForId?:string;
 
   @Input() public inputAttrs?:{ [key:string]:string } = {};
 

lib/primer/open_project/forms/autocompleter.html.erb

@@ -6,7 +6,8 @@
                  input_id: builder.field_id(@input.name),
                  select_options: select_options.map(&:to_h),
                  multiple: @autocomplete_options.fetch(:multiple, false),
-                 key: @autocomplete_options.fetch(:resource, '')
+                 key: @autocomplete_options.fetch(:resource, ''),
+                 append_to: @autocomplete_options.fetch(:append_to, 'body')
                } %>
   <% else %>
     <%= angular_component_tag 'opce-autocompleter',

modules/meeting/app/components/work_package_meetings_tab/add_work_package_to_meeting_form_component.html.erb

@@ -16,7 +16,7 @@
                 end
               end
               flex.with_row do
-                render(MeetingAgendaItem::MeetingForm.new(f))
+                render(MeetingAgendaItem::MeetingForm.new(f, wrapper_id: 'add-work-package-to-meeting-dialog'))
               end
               flex.with_row(mt: 3) do
                 render(MeetingAgendaItem::Notes.new(f))

modules/meeting/app/forms/meeting_agenda_item/meeting_form.rb

@@ -38,7 +38,8 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm
       caption: I18n.t("label_meeting_selection_caption"),
       autocomplete_options: {
         multiple: false,
-        decorated: true
+        decorated: true,
+        append_to: append_to_container
       }
     ) do |select|
       MeetingAgendaItems::CreateContract
@@ -53,8 +54,13 @@ class MeetingAgendaItem::MeetingForm < ApplicationForm
     end
   end
 
-  def initialize(disabled: false)
+  def initialize(disabled: false, wrapper_id: nil)
     super()
     @disabled = disabled
+    @wrapper_id = wrapper_id
+  end
+
+  def append_to_container
+    @wrapper_id.nil? ? 'body' : "##{@wrapper_id}"
   end
 end