From 7646f7127a1dbec7d13e78791266f35052464896 Mon Sep 17 00:00:00 2001
From: Jane Sandberg <sandbej@linnbenton.edu>
Date: Sun, 9 Jun 2019 20:57:49 -0700
Subject: [PATCH] LP1832146: Make sure that comboboxes don't get cut off

To test:
1) Go to the sandbox and open the accordion.
2) Open the combobox. Note that it isn't cut off.
3) Go to Administration > Acquisitions Administration
> Exchange Rates.
4) Click New Exchange Rate.
5) Go to the "From Currency" and "To Currency" fields.
6) Note that the dropdowns are visible and not cut off.

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 .../app/share/combobox/combobox.component.html |  1 +
 .../share/org-select/org-select.component.html |  1 +
 .../app/staff/sandbox/sandbox.component.html   | 18 ++++++++++++++++++
 Open-ILS/src/eg2/src/styles.css                |  8 ++++++++
 4 files changed, 28 insertions(+)

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
index b6099fcae9..0f0afde823 100644
--- a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
@@ -18,6 +18,7 @@
     [inputFormatter]="formatDisplayString"
     (click)="onClick($event)"
     (blur)="onBlur()"
+    container="body"
     (selectItem)="selectorChanged($event)"
     #instance="ngbTypeahead"/>
   <div class="d-flex flex-column icons" (click)="openMe($event)">
diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
index cf7b93d80f..d49217c6fb 100644
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.html
@@ -21,6 +21,7 @@
     [inputFormatter]="formatter"
     (click)="click$.next($event.target.value)"
     (selectItem)="orgChanged($event)"
+    container="body"
     #instance="ngbTypeahead"
   />
 
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 0bba0e517e..4ac22a9e13 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -157,6 +157,7 @@
 </div>
 <br/><br/>
 
+
 <div>
   <h4>Cross-tab communications example</h4>
   <p>To test, open this sandbox in a second browser tab. Enter something in the input box below, then switch to the other tab and click anywhere on the page. 
@@ -170,6 +171,23 @@
     message received: {{sbChannelText}}
   </div>
 </div>
+<br/><br/>
+
+<ngb-accordion>
+  <ngb-panel title="Open me for comboboxes">
+    <ng-template ngbPanelContent>
+      <eg-org-select></eg-org-select>
+      <eg-combobox>
+        <eg-combobox-entry entryId="bib" entryLabel="Bibliographic Records"
+          i18n-entryLabel></eg-combobox-entry>
+        <eg-combobox-entry entryId="auth" entryLabel="Authority Records"
+          i18n-entryLabel></eg-combobox-entry>
+        <eg-combobox-entry entryId="bib-acq" entryLabel="Acquisitions Records"
+          i18n-entryLabel></eg-combobox-entry>
+      </eg-combobox>
+    </ng-template>
+  </ngb-panel>
+</ngb-accordion>
 
 <!-- grid stuff -->
 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index 0ffd6b576a..5819e336ba 100644
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -195,3 +195,11 @@ h5 {font-size: .95rem}
   #eg-print-container pre {border: none}
 }
 
+/**
+ * Make sure that comboboxes (including org select
+ * are visible, even in nested modals.
+ *
+ * See https://github.com/ng-bootstrap/ng-bootstrap/issues/2505
+ * for the upstream issue that necessitates this.
+ */
+body>.dropdown-menu {z-index: 2100;}
-- 
2.43.2