Angular: org-select and eg-combobox get cut off when you put them in a ngb-accordion

[Jane Sandberg]

Here's an example:

<ngb-accordion>
  <ngb-panel title="1">
    <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>

A possible solution is to add container="body" to the <input>s in those components. The fix for https://bugs.launchpad.net/evergreen/+bug/1831780 takes a similar approach.

Unfortunately, then we run into this bug: https://github.com/ng-bootstrap/ng-bootstrap/issues/2505. tl;dr those components will get cut off again, this time if they are in modals (e.g., many fm-editors throughout the admin interfaces).

We could manually set a z-index within the Angular client, or see if we can help with the upstream issue.

[Jane Sandberg (sandbergja)]

Branch available at user/sandbergja/lp1832146_dont_cut_off_comboboxes

Here's a link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp1832146_dont_cut_off_comboboxes

Here are testing notes from the commit message:

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.

[Galen Charlton (gmc)]

Works for me. Pushed to master and rel_3_3. Thanks, Jane!