diff --git a/app/javascript/mastodon/features/compose/components/expiration_dropdown.jsx b/app/javascript/mastodon/features/compose/components/expiration_dropdown.jsx index 4b02351041..cba6af2e3c 100644 --- a/app/javascript/mastodon/features/compose/components/expiration_dropdown.jsx +++ b/app/javascript/mastodon/features/compose/components/expiration_dropdown.jsx @@ -1,16 +1,20 @@ -import { PureComponent } from 'react'; import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; + import { injectIntl, defineMessages } from 'react-intl'; -import { IconButton } from '../../../components/icon_button'; -import Overlay from 'react-overlays/Overlay'; -import { supportsPassiveEvents } from 'detect-passive-events'; + import classNames from 'classnames'; +import { supportsPassiveEvents } from 'detect-passive-events'; +import Overlay from 'react-overlays/Overlay'; + +import { IconButton } from '../../../components/icon_button'; + const messages = defineMessages({ add_expiration: { id: 'status.expiration.add', defaultMessage: 'Set status expiration' }, }); -const listenerOptions = supportsPassiveEvents ? { passive: true } : false; +const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true; class ExpirationDropdownMenu extends PureComponent { @@ -25,6 +29,7 @@ class ExpirationDropdownMenu extends PureComponent { handleDocumentClick = e => { if (this.node && !this.node.contains(e.target)) { this.props.onClose(); + e.stopPropagation(); } }; @@ -82,13 +87,13 @@ class ExpirationDropdownMenu extends PureComponent { }; componentDidMount () { - document.addEventListener('click', this.handleDocumentClick, false); + document.addEventListener('click', this.handleDocumentClick, { capture: true }); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); if (this.focusedItem) this.focusedItem.focus({ preventScroll: true }); } componentWillUnmount () { - document.removeEventListener('click', this.handleDocumentClick, false); + document.removeEventListener('click', this.handleDocumentClick, { capture: true }); document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions); } diff --git a/app/javascript/mastodon/features/compose/components/searchability_dropdown.jsx b/app/javascript/mastodon/features/compose/components/searchability_dropdown.jsx index 717d70f6fe..e7a002b9d8 100644 --- a/app/javascript/mastodon/features/compose/components/searchability_dropdown.jsx +++ b/app/javascript/mastodon/features/compose/components/searchability_dropdown.jsx @@ -1,11 +1,16 @@ -import { PureComponent } from 'react'; import PropTypes from 'prop-types'; +import { PureComponent } from 'react'; + import { injectIntl, defineMessages } from 'react-intl'; -import { IconButton } from '../../../components/icon_button'; -import Overlay from 'react-overlays/Overlay'; -import { supportsPassiveEvents } from 'detect-passive-events'; + import classNames from 'classnames'; -import { Icon } from 'mastodon/components/icon'; + +import { supportsPassiveEvents } from 'detect-passive-events'; +import Overlay from 'react-overlays/Overlay'; + +import { Icon } from 'mastodon/components/icon'; + +import { IconButton } from '../../../components/icon_button'; const messages = defineMessages({ public_short: { id: 'searchability.public.short', defaultMessage: 'Public' }, @@ -19,7 +24,7 @@ const messages = defineMessages({ change_searchability: { id: 'searchability.change', defaultMessage: 'Set status searchability' }, }); -const listenerOptions = supportsPassiveEvents ? { passive: true } : false; +const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true; class SearchabilityDropdownMenu extends PureComponent { @@ -34,6 +39,7 @@ class SearchabilityDropdownMenu extends PureComponent { handleDocumentClick = e => { if (this.node && !this.node.contains(e.target)) { this.props.onClose(); + e.stopPropagation(); } }; @@ -91,13 +97,13 @@ class SearchabilityDropdownMenu extends PureComponent { }; componentDidMount () { - document.addEventListener('click', this.handleDocumentClick, false); + document.addEventListener('click', this.handleDocumentClick, { capture: true }); document.addEventListener('touchend', this.handleDocumentClick, listenerOptions); if (this.focusedItem) this.focusedItem.focus({ preventScroll: true }); } componentWillUnmount () { - document.removeEventListener('click', this.handleDocumentClick, false); + document.removeEventListener('click', this.handleDocumentClick, { capture: true }); document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions); } diff --git a/app/javascript/mastodon/features/compose/containers/expiration_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/expiration_dropdown_container.js index 5de1ccb3e6..96bfd5b83e 100644 --- a/app/javascript/mastodon/features/compose/containers/expiration_dropdown_container.js +++ b/app/javascript/mastodon/features/compose/containers/expiration_dropdown_container.js @@ -1,7 +1,8 @@ import { connect } from 'react-redux'; -import ExpirationDropdown from '../components/expiration_dropdown'; + import { openModal, closeModal } from '../../../actions/modal'; import { isUserTouching } from '../../../is_mobile'; +import ExpirationDropdown from '../components/expiration_dropdown'; const mapStateToProps = state => ({ value: state.getIn(['compose', 'privacy']), @@ -16,8 +17,14 @@ const mapDispatchToProps = (dispatch, { onPickExpiration }) => ({ }, isUserTouching, - onModalOpen: props => dispatch(openModal('ACTIONS', props)), - onModalClose: () => dispatch(closeModal()), + onModalOpen: props => dispatch(openModal({ + modalType: 'ACTIONS', + modalProps: props, + })), + onModalClose: () => dispatch(closeModal({ + modalType: undefined, + ignoreFocus: false, + })), }); diff --git a/app/javascript/mastodon/features/compose/containers/searchability_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/searchability_dropdown_container.js index 3b4a83a1f0..09c666cea0 100644 --- a/app/javascript/mastodon/features/compose/containers/searchability_dropdown_container.js +++ b/app/javascript/mastodon/features/compose/containers/searchability_dropdown_container.js @@ -1,8 +1,9 @@ import { connect } from 'react-redux'; -import SearchabilityDropdown from '../components/searchability_dropdown'; + import { changeComposeSearchability } from '../../../actions/compose'; import { openModal, closeModal } from '../../../actions/modal'; import { isUserTouching } from '../../../is_mobile'; +import SearchabilityDropdown from '../components/searchability_dropdown'; const mapStateToProps = state => ({ value: state.getIn(['compose', 'searchability']), @@ -15,8 +16,14 @@ const mapDispatchToProps = dispatch => ({ }, isUserTouching, - onModalOpen: props => dispatch(openModal('ACTIONS', props)), - onModalClose: () => dispatch(closeModal()), + onModalOpen: props => dispatch(openModal({ + modalType: 'ACTIONS', + modalProps: props, + })), + onModalClose: () => dispatch(closeModal({ + modalType: undefined, + ignoreFocus: false, + })), });