diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js index 87b799a1b..80ee78e81 100644 --- a/frontend/src/Components/Form/EnhancedSelectInput.js +++ b/frontend/src/Components/Form/EnhancedSelectInput.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import { Manager, Popper, Reference } from 'react-popper'; import classNames from 'classnames'; import getUniqueElememtId from 'Utilities/getUniqueElementId'; -import isMobileUtil from 'Utilities/isMobile'; +import { isMobile as isMobileUtil } from 'Utilities/mobile'; import * as keyCodes from 'Utilities/Constants/keyCodes'; import { icons, sizes, scrollDirections } from 'Helpers/Props'; import Icon from 'Components/Icon'; diff --git a/frontend/src/Components/Modal/Modal.css b/frontend/src/Components/Modal/Modal.css index b9d702f86..d7269ea46 100644 --- a/frontend/src/Components/Modal/Modal.css +++ b/frontend/src/Components/Modal/Modal.css @@ -29,6 +29,12 @@ overflow: hidden !important; } +.modalOpenIOS { + position: fixed; + right: 0; + left: 0; +} + /* * Sizes */ diff --git a/frontend/src/Components/Modal/Modal.js b/frontend/src/Components/Modal/Modal.js index 8dfe43433..ab2f58daa 100644 --- a/frontend/src/Components/Modal/Modal.js +++ b/frontend/src/Components/Modal/Modal.js @@ -4,6 +4,8 @@ import ReactDOM from 'react-dom'; import classNames from 'classnames'; import elementClass from 'element-class'; import getUniqueElememtId from 'Utilities/getUniqueElementId'; +import { isIOS } from 'Utilities/mobile'; +import { setScrollLock } from 'Utilities/scrollLock'; import * as keyCodes from 'Utilities/Constants/keyCodes'; import { sizes } from 'Helpers/Props'; import ErrorBoundary from 'Components/Error/ErrorBoundary'; @@ -69,7 +71,14 @@ class Modal extends Component { window.addEventListener('keydown', this.onKeyDown); if (openModals.length === 1) { - elementClass(document.body).add(styles.modalOpen); + if (isIOS()) { + setScrollLock(true); + const offset = document.body.scrollTop; + document.body.style.top = `${offset * -1}px`; + elementClass(document.body).add(styles.modalOpenIOS); + } else { + elementClass(document.body).add(styles.modalOpen); + } } } @@ -78,7 +87,15 @@ class Modal extends Component { window.removeEventListener('keydown', this.onKeyDown); if (openModals.length === 0) { - elementClass(document.body).remove(styles.modalOpen); + setScrollLock(false); + + if (isIOS()) { + const offset = parseInt(document.body.style.top); + elementClass(document.body).remove(styles.modalOpenIOS); + document.body.scrollTop = (offset * -1); + } else { + elementClass(document.body).remove(styles.modalOpen); + } } } diff --git a/frontend/src/Components/Page/PageContentBody.js b/frontend/src/Components/Page/PageContentBody.js index 81bd9b29b..5c277d8f5 100644 --- a/frontend/src/Components/Page/PageContentBody.js +++ b/frontend/src/Components/Page/PageContentBody.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import { isLocked } from 'Utilities/scrollLock'; import { scrollDirections } from 'Helpers/Props'; import OverlayScroller from 'Components/Scroller/OverlayScroller'; import Scroller from 'Components/Scroller/Scroller'; @@ -7,6 +8,17 @@ import styles from './PageContentBody.css'; class PageContentBody extends Component { + // + // Listeners + + onScroll = (props) => { + const { onScroll } = this.props; + + if (this.props.onScroll && !isLocked()) { + onScroll(props); + } + } + // // Render @@ -27,6 +39,7 @@ class PageContentBody extends Component { className={className} scrollDirection={scrollDirections.VERTICAL} {...otherProps} + onScroll={this.onScroll} >