diff --git a/app/javascript/flavours/glitch/actions/modal.js b/app/javascript/flavours/glitch/actions/modal.js
index 3d0299db5..3e576fab8 100644
--- a/app/javascript/flavours/glitch/actions/modal.js
+++ b/app/javascript/flavours/glitch/actions/modal.js
@@ -9,9 +9,10 @@ export function openModal(type, props) {
};
};
-export function closeModal(type) {
+export function closeModal(type, options = { ignoreFocus: false }) {
return {
type: MODAL_CLOSE,
modalType: type,
+ ignoreFocus: options.ignoreFocus,
};
};
diff --git a/app/javascript/flavours/glitch/components/modal_root.js b/app/javascript/flavours/glitch/components/modal_root.js
index 7b5a630e5..0595f6a0e 100644
--- a/app/javascript/flavours/glitch/components/modal_root.js
+++ b/app/javascript/flavours/glitch/components/modal_root.js
@@ -18,6 +18,7 @@ export default class ModalRoot extends React.PureComponent {
b: PropTypes.number,
}),
noEsc: PropTypes.bool,
+ ignoreFocus: PropTypes.bool,
};
activeElement = this.props.children ? document.activeElement : null;
@@ -72,7 +73,9 @@ export default class ModalRoot extends React.PureComponent {
// immediately selectable, we have to wait for observers to run, as
// described in https://github.com/WICG/inert#performance-and-gotchas
Promise.resolve().then(() => {
- this.activeElement.focus({ preventScroll: true });
+ if (!this.props.ignoreFocus) {
+ this.activeElement.focus({ preventScroll: true });
+ }
this.activeElement = null;
}).catch(console.error);
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index c75906ce7..b03bc34b8 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -246,9 +246,14 @@ class ComposeForm extends ImmutablePureComponent {
selectionStart = selectionEnd = text.length;
}
if (textarea) {
- textarea.setSelectionRange(selectionStart, selectionEnd);
- textarea.focus();
- if (!singleColumn) textarea.scrollIntoView();
+ // Because of the wicg-inert polyfill, the activeElement may not be
+ // immediately selectable, we have to wait for observers to run, as
+ // described in https://github.com/WICG/inert#performance-and-gotchas
+ Promise.resolve().then(() => {
+ textarea.setSelectionRange(selectionStart, selectionEnd);
+ textarea.focus();
+ if (!singleColumn) textarea.scrollIntoView();
+ }).catch(console.error);
}
// Refocuses the textarea after submitting.
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js
index e01d277a1..fc0379ce9 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.js
@@ -62,7 +62,7 @@ class Footer extends ImmutablePureComponent {
const { router } = this.context;
if (onClose) {
- onClose();
+ onClose(true);
}
dispatch(replyCompose(status, router.history));
diff --git a/app/javascript/flavours/glitch/features/ui/components/modal_root.js b/app/javascript/flavours/glitch/features/ui/components/modal_root.js
index 1e065c171..a975c4013 100644
--- a/app/javascript/flavours/glitch/features/ui/components/modal_root.js
+++ b/app/javascript/flavours/glitch/features/ui/components/modal_root.js
@@ -55,6 +55,7 @@ export default class ModalRoot extends React.PureComponent {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired,
+ ignoreFocus: PropTypes.bool,
};
state = {
@@ -85,7 +86,7 @@ export default class ModalRoot extends React.PureComponent {
return ;
}
- handleClose = () => {
+ handleClose = (ignoreFocus = false) => {
const { onClose } = this.props;
let message = null;
try {
@@ -95,7 +96,7 @@ export default class ModalRoot extends React.PureComponent {
// isn't set.
// This would be much smoother with react-intl 3+ and `forwardRef`.
}
- onClose(message);
+ onClose(message, ignoreFocus);
}
setModalRef = (c) => {
@@ -103,12 +104,12 @@ export default class ModalRoot extends React.PureComponent {
}
render () {
- const { type, props } = this.props;
+ const { type, props, ignoreFocus } = this.props;
const { backgroundColor } = this.state;
const visible = !!type;
return (
-
+
{visible && (
{(SpecificComponent) => }
diff --git a/app/javascript/flavours/glitch/features/ui/containers/modal_container.js b/app/javascript/flavours/glitch/features/ui/containers/modal_container.js
index 039aabd8a..560c34f01 100644
--- a/app/javascript/flavours/glitch/features/ui/containers/modal_container.js
+++ b/app/javascript/flavours/glitch/features/ui/containers/modal_container.js
@@ -3,22 +3,23 @@ import { openModal, closeModal } from 'flavours/glitch/actions/modal';
import ModalRoot from '../components/modal_root';
const mapStateToProps = state => ({
- type: state.getIn(['modal', 0, 'modalType'], null),
- props: state.getIn(['modal', 0, 'modalProps'], {}),
+ ignoreFocus: state.getIn(['modal', 'ignoreFocus']),
+ type: state.getIn(['modal', 'stack', 0, 'modalType'], null),
+ props: state.getIn(['modal', 'stack', 0, 'modalProps'], {}),
});
const mapDispatchToProps = dispatch => ({
- onClose (confirmationMessage) {
+ onClose (confirmationMessage, ignoreFocus = false) {
if (confirmationMessage) {
dispatch(
openModal('CONFIRM', {
message: confirmationMessage.message,
confirm: confirmationMessage.confirm,
- onConfirm: () => dispatch(closeModal()),
+ onConfirm: () => dispatch(closeModal(undefined, { ignoreFocus })),
}),
);
} else {
- dispatch(closeModal());
+ dispatch(closeModal(undefined, { ignoreFocus }));
}
},
});
diff --git a/app/javascript/flavours/glitch/reducers/modal.js b/app/javascript/flavours/glitch/reducers/modal.js
index ae205c6d5..2ef0aef24 100644
--- a/app/javascript/flavours/glitch/reducers/modal.js
+++ b/app/javascript/flavours/glitch/reducers/modal.js
@@ -3,16 +3,36 @@ import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines';
import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from 'flavours/glitch/actions/compose';
import { Stack as ImmutableStack, Map as ImmutableMap } from 'immutable';
-export default function modal(state = ImmutableStack(), action) {
+const initialState = ImmutableMap({
+ ignoreFocus: false,
+ stack: ImmutableStack(),
+});
+
+const popModal = (state, { modalType, ignoreFocus }) => {
+ if (modalType === undefined || modalType === state.getIn(['stack', 0, 'modalType'])) {
+ return state.set('ignoreFocus', !!ignoreFocus).update('stack', stack => stack.shift());
+ } else {
+ return state;
+ }
+};
+
+const pushModal = (state, modalType, modalProps) => {
+ return state.withMutations(map => {
+ map.set('ignoreFocus', false);
+ map.update('stack', stack => stack.unshift(ImmutableMap({ modalType, modalProps })));
+ });
+};
+
+export default function modal(state = initialState, action) {
switch(action.type) {
case MODAL_OPEN:
- return state.unshift(ImmutableMap({ modalType: action.modalType, modalProps: action.modalProps }));
+ return pushModal(state, action.modalType, action.modalProps);
case MODAL_CLOSE:
- return (action.modalType === undefined || action.modalType === state.getIn([0, 'modalType'])) ? state.shift() : state;
+ return popModal(state, action);
case COMPOSE_UPLOAD_CHANGE_SUCCESS:
- return state.getIn([0, 'modalType']) === 'FOCAL_POINT' ? state.shift() : state;
+ return popModal(state, { modalType: 'FOCAL_POINT', ignoreFocus: false });
case TIMELINE_DELETE:
- return state.filterNot((modal) => modal.get('modalProps').statusId === action.id);
+ return state.update('stack', stack => stack.filterNot((modal) => modal.get('modalProps').statusId === action.id));
default:
return state;
}