UIEH-1397: The list of packages is no longer cut off in the modal win…

…dow. (#1697)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change history for ui-eholdings
 
+## [9.0.2] (IN PROGRESS)
+
+* The list of packages is no longer cut off in the modal window. (UIEH-1397)
+
 ## [9.0.1] (https://github.com/folio-org/ui-eholdings/tree/v9.0.1) (2023-11-03)
 
 * Fix deleting and then saving custom embargo. (UIEH-1394)

src/components/title/_fields/package-select/package-select-field.js

@@ -11,8 +11,6 @@ import {
   Icon,
 } from '@folio/stripes/components';
 
-import css from './package-select-field.css';
-
 function validate(value) {
   return value ? undefined : <FormattedMessage id="ui-eholdings.validate.errors.packageSelect.required" />;
 }
@@ -35,13 +33,13 @@ const PackageSelectField = ({
   };
 
   return (
-    <div
-      data-test-eholdings-package-select-field
-      className={css.packageSelectFieldContainer}
-    >
+    <div data-test-eholdings-package-select-field>
       <Field
         name="packageId"
         component={Selection}
+        popper={{
+          portal: document.getElementById('ModuleContainer'),
+        }}
         label={label}
         ariaLabel={label}
         validate={validate}
@@ -53,14 +51,6 @@ const PackageSelectField = ({
         data-testid="package-select-field"
         loading={loadingOptions}
         loadingMessage={<Icon icon="spinner-ellipsis" />}
-        tether={{
-          constraints: [
-            {
-              to: 'window',
-              attachment: 'together',
-            },
-          ],
-        }}
       />
     </div>
   );

src/components/title/show/title-show.css

@@ -1,3 +1,7 @@
 .add-to-custom-package-button {
   margin: 1rem 0 0;
 }
+
+.addTitleModalContent {
+  overflow: visible;
+}

src/components/title/show/title-show.js

@@ -501,6 +501,7 @@ class TitleShow extends Component {
           id="eholdings-custom-package-modal"
           wrappingElement="form"
           enforceFocus={false}
+          contentClass={styles.addTitleModalContent}
           footer={(
             <ModalFooter>
               <Button