Add usePortal flag to Modals

sharetribe · Feb 13, 2020 · 944395c · 944395c
1 parent 1e290ab
commit 944395c
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 0 deletions.
diff --git a/src/components/EditListingWizard/EditListingWizard.js b/src/components/EditListingWizard/EditListingWizard.js
@@ -380,6 +380,7 @@ class EditListingWizard extends Component {
           isOpen={this.state.showPayoutDetails}
           onClose={this.handlePayoutModalClose}
           onManageDisableScrolling={onManageDisableScrolling}
+          usePortal
         >
           <div className={css.modalPayoutDetailsWrapper}>
             <h1 className={css.modalTitle}>

diff --git a/src/components/ModalMissingInformation/ModalMissingInformation.js b/src/components/ModalMissingInformation/ModalMissingInformation.js
@@ -139,6 +139,7 @@ class ModalMissingInformation extends Component {
             hasSeenMissingInformationReminder: true,
           });
         }}
+        usePortal
         onManageDisableScrolling={onManageDisableScrolling}
         closeButtonMessage={closeButtonMessage}
       >

diff --git a/src/components/ReviewModal/ReviewModal.js b/src/components/ReviewModal/ReviewModal.js
@@ -36,6 +36,7 @@ const ReviewModal = props => {
       isOpen={isOpen}
       onClose={onCloseModal}
       onManageDisableScrolling={onManageDisableScrolling}
+      usePortal
       closeButtonMessage={closeButtonMessage}
     >
       <IconReviewUser className={css.modalIcon} />

diff --git a/src/components/Topbar/Topbar.js b/src/components/Topbar/Topbar.js
@@ -231,6 +231,7 @@ class TopbarComponent extends Component {
           id="TopbarMobileMenu"
           isOpen={isMobileMenuOpen}
           onClose={this.handleMobileMenuClose}
+          usePortal
           onManageDisableScrolling={onManageDisableScrolling}
         >
           {authInProgress ? null : mobileMenu}
@@ -240,6 +241,7 @@ class TopbarComponent extends Component {
           containerClassName={css.modalContainer}
           isOpen={isMobileSearchOpen}
           onClose={this.handleMobileSearchClose}
+          usePortal
           onManageDisableScrolling={onManageDisableScrolling}
         >
           <div className={css.searchContainer}>

diff --git a/src/containers/AuthenticationPage/AuthenticationPage.js b/src/containers/AuthenticationPage/AuthenticationPage.js
@@ -241,6 +241,7 @@ export class AuthenticationPageComponent extends Component {
               id="AuthenticationPage.tos"
               isOpen={this.state.tosModalOpen}
               onClose={() => this.setState({ tosModalOpen: false })}
+              usePortal
               onManageDisableScrolling={onManageDisableScrolling}
             >
               <div className={css.termsWrapper}>

diff --git a/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap b/src/containers/AuthenticationPage/__snapshots__/AuthenticationPage.test.js.snap
@@ -86,6 +86,7 @@ exports[`AuthenticationPageComponent matches snapshot 1`] = `
         isOpen={false}
         onClose={[Function]}
         onManageDisableScrolling={[Function]}
+        usePortal={true}
       >
         <div>
           <h2>

diff --git a/src/containers/ListingPage/SectionHostMaybe.js b/src/containers/ListingPage/SectionHostMaybe.js
@@ -35,6 +35,7 @@ const SectionHostMaybe = props => {
         contentClassName={css.enquiryModalContent}
         isOpen={isEnquiryModalOpen}
         onClose={onCloseEnquiryModal}
+        usePortal
         onManageDisableScrolling={onManageDisableScrolling}
       >
         <EnquiryForm

diff --git a/src/containers/ListingPage/SectionImages.js b/src/containers/ListingPage/SectionImages.js
@@ -63,6 +63,7 @@ const SectionImages = props => {
         lightCloseButton
         isOpen={imageCarouselOpen}
         onClose={onImageCarouselClose}
+        usePortal
         onManageDisableScrolling={onManageDisableScrolling}
       >
         <ImageCarousel images={listing.images} />