post/nas
1
0
Fork 0
forked from gitea/nas
Code Pull requests Activity

Fix reply button on media modal not giving focus to compose form (#17626)

Browse source 
* Avoid compose form and modal management fighting for focus

* Fix reply button on media modal footer not giving focus to compose form
This commit is contained in:
Claire 2022-02-25 00:51:01 +01:00 • committed by GitHub
parent d4592bbfcd
commit 2cd31b3177
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 50 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/mastodon/features/ui/components/modal_root.js
View file

@ -45,6 +45,7 @@ export default class ModalRoot extends React.PureComponent {
type: PropTypes.string,
props: PropTypes.object,
onClose: PropTypes.func.isRequired,
ignoreFocus: PropTypes.bool,
};
state = {
@ -79,7 +80,7 @@ export default class ModalRoot extends React.PureComponent {
return <BundleModalError {...props} onClose={onClose} />;
}
handleClose = () => {
handleClose = (ignoreFocus = false) => {
const { onClose } = this.props;
let message = null;
try {
@ -89,7 +90,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) => {
@ -97,12 +98,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 (
<Base backgroundColor={backgroundColor} onClose={this.handleClose}>
<Base backgroundColor={backgroundColor} onClose={this.handleClose} ignoreFocus={ignoreFocus}>
{visible && (
<BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
{(SpecificComponent) => <SpecificComponent {...props} onChangeBackgroundColor={this.setBackgroundColor} onClose={this.handleClose} ref={this.setModalRef} />}

11
app/javascript/mastodon/features/ui/containers/modal_container.js
View file

@ -3,22 +3,23 @@ import { openModal, closeModal } from '../../../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 }));
}
},
});