Add appendTo input to go-select

projects/go-lib/src/lib/components/go-select/go-select.component.html

@@ -6,6 +6,7 @@
 </label>
 
 <ng-select
+  [appendTo]="appendTo"
   [labelForId]="id"
   [items]="items"
   [bindLabel]="bindLabel"

projects/go-lib/src/lib/components/go-select/go-select.component.ts

@@ -10,6 +10,7 @@ import { FormControl } from '@angular/forms';
 export class GoSelectComponent implements OnInit {
   id: string;
 
+  @Input() appendTo: string;
   @Input() bindLabel: string;
   @Input() bindValue: string;
   @Input() control: FormControl;

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.html

@@ -318,4 +318,30 @@ <h2 class="go-heading-6 go-heading--underlined">Code</h2>
       </div>
     </ng-container>
   </go-card>
+  <go-card id="form-select-appendto" class="go-column go-column--100">
+    <ng-container go-card-header>
+      <h1 class="go-heading-5">Component appendTo</h1>
+    </ng-container>
+    <ng-container go-card-content>
+      <p class="go-body-copy">
+        The <code class="code-block--inline">@Input() appendTo: string;</code> binding is useful when implementing a 
+        <code class="code-block--inline">go-select</code> within a <code class="code-block--inline">go-modal</code>.
+        Setting <code class="code-block--inline">appendTo</code> to <code class="code-block--inline">'body'</code> will prevent
+        the modal from closing automatically upon selecting an item from the select dropdown.
+      </p>
+      <div class="go-container">
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">View</h2>
+          <go-button (handleClick)="openModal()">Click Me</go-button>
+        </div>
+        <div class="go-column go-column--50">
+          <h2 class="go-heading-6 go-heading--underlined">Code</h2>
+          <code
+            [highlight]="select10OpenModalCode"
+            class="code-block--no-bottom-margin"
+          ></code>
+        </div>
+      </div>
+    </ng-container>
+  </go-card>
 </section>

projects/go-style-guide/src/app/features/ui-kit/components/form-docs/components/select-docs/select-docs.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { GoModalService, GoSelectComponent } from 'projects/go-lib/src/public_api';
+import { ModalTestComponent } from '../../../modal-test/modal-test.component';
 
 @Component({
   templateUrl: './select-docs.component.html'
@@ -9,6 +11,7 @@ export class SelectDocsComponent implements OnInit {
     { value: 1, name: 'Reeses' },
     { value: 2, name: 'Mints' }
   ];
+
   select1: FormControl = new FormControl('');
   select2: FormControl = new FormControl('');
   select3: FormControl = new FormControl('');
@@ -18,6 +21,7 @@ export class SelectDocsComponent implements OnInit {
   select7: FormControl = new FormControl('');
   select8: FormControl = new FormControl('');
   select9: FormControl = new FormControl('');
+  select10: FormControl = new FormControl('');
 
   hints: Array<string> = ['please select you favorite candy'];
 
@@ -137,6 +141,24 @@ export class SelectDocsComponent implements OnInit {
   loadingSelectOptions: boolean = true;
   `;
 
+  select10OpenModalCode: string = `
+  openModal(): void {
+    this.goModalService.openModal(
+      GoSelectComponent,
+      {
+        appendTo: 'body',
+        bindLabel: 'name',
+        bindValue: 'value',
+        control: this.select10,
+        items: this.items,
+        label: 'Favorite Candy'
+      }
+    );
+  }
+  `;
+
+  constructor(private goModalService: GoModalService) { }
+
   ngOnInit(): void {
     setTimeout((): void => {
       this.select5.setErrors([
@@ -150,4 +172,18 @@ export class SelectDocsComponent implements OnInit {
       ]);
     });
   }
+
+  openModal(): void {
+    this.goModalService.openModal(
+      GoSelectComponent,
+      {
+        appendTo: 'body',
+        bindLabel: 'name',
+        bindValue: 'value',
+        control: this.select10,
+        items: this.items,
+        label: 'Favorite Candy',
+      }
+    );
+  }
 }

projects/go-style-guide/src/app/features/ui-kit/ui-kit.module.ts

@@ -25,7 +25,8 @@ import {
   GoTableModule,
   GoTextAreaModule,
   GoToasterService,
-  GoToastModule
+  GoToastModule,
+  GoSelectComponent
 } from '../../../../../go-lib/src/public_api';
 
 // Module Routes
@@ -141,6 +142,7 @@ import { ActionSheetPanelDocsComponent } from './components/action-sheet-docs/co
   ],
   entryComponents: [
     BasicTestComponent,
+    GoSelectComponent,
     ModalTestComponent
   ],
   providers: [

projects/go-tester/src/app/app.component.ts

@@ -2,15 +2,16 @@ import { Component, OnInit } from '@angular/core';
 
 import {
   GoConfigService,
-  GoIconComponent,
   GoModalService,
   GoOffCanvasService,
+  GoSelectComponent,
   GoSideNavService,
   GoToasterService,
   NavGroup,
-  NavItem
+  NavItem,
 } from '../../../go-lib/src/public_api';
 import { OffCanvasTestComponent } from './components/off-canvas-test/off-canvas-test.component';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -46,6 +47,19 @@ export class AppComponent implements OnInit {
     }
   ];
 
+  selectControl: FormControl = new FormControl('');
+
+  selectItems: any = [
+    { value: 1, label: 'Reeses' },
+    { value: 2, label: 'Mints' },
+    { value: 3, label: 'Snickers' },
+    { value: 4, label: 'KitKat' },
+    { value: 5, label: 'Milky Way' },
+    { value: 6, label: 'Sour Patch Kids' },
+    { value: 7, label: 'Gobstoppers' },
+    { value: 8, label: 'Spinach' }
+  ];
+
   constructor(
     private goConfigService: GoConfigService,
     private goToasterService: GoToasterService,
@@ -71,9 +85,12 @@ export class AppComponent implements OnInit {
 
   openModal(): void {
     this.goModalService.openModal(
-      GoIconComponent,
+      GoSelectComponent,
       {
-        icon: 'alarm'
+        appendTo: 'body',
+        control: this.selectControl,
+        items: this.selectItems,
+        label: 'Testing the appendTo input'
       }
     );
   }

projects/go-tester/src/app/app.module.ts

@@ -24,13 +24,14 @@ import {
   GoOffCanvasModule,
   GoRadioModule,
   GoSearchModule,
+  GoSelectComponent,
   GoSelectModule,
   GoSideNavModule,
   GoSwitchToggleModule,
   GoTableModule,
   GoTextAreaModule,
   GoToasterModule,
-  GoToastModule
+  GoToastModule,
 } from '../../../go-lib/src/public_api';
 
 import { AppRoutesModule } from './app-routing.module';
@@ -95,6 +96,7 @@ import { AppGuard } from './app.guard';
   ],
   entryComponents: [
     GoButtonComponent,
+    GoSelectComponent,
     OffCanvasTestComponent
   ],
   bootstrap: [AppComponent]