Remove 'beforeunload' event from UI

This only works in MS Edge but likely causes re-rendering of the UI on compose events in every browser. There are better ways to prevent data loss, like storing the composer state in localStorage.
actually-fix-tabs-bar
Alex Gleason 2021-07-01 13:19:39 -05:00
rodzic 90a062e9a3
commit e87affbbca
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
1 zmienionych plików z 1 dodań i 20 usunięć

Wyświetl plik

@ -157,9 +157,6 @@ const mapStateToProps = state => {
const account = state.getIn(['accounts', me]); const account = state.getIn(['accounts', me]);
return { return {
isComposing: state.getIn(['compose', 'is_composing']),
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null, dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
accessToken: getAccessToken(state), accessToken: getAccessToken(state),
streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']), streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
@ -339,9 +336,6 @@ class UI extends React.PureComponent {
static propTypes = { static propTypes = {
dispatch: PropTypes.func.isRequired, dispatch: PropTypes.func.isRequired,
children: PropTypes.node, children: PropTypes.node,
isComposing: PropTypes.bool,
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
location: PropTypes.object, location: PropTypes.object,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
dropdownMenuIsOpen: PropTypes.bool, dropdownMenuIsOpen: PropTypes.bool,
@ -356,17 +350,6 @@ class UI extends React.PureComponent {
mobile: isMobile(window.innerWidth), mobile: isMobile(window.innerWidth),
}; };
handleBeforeUnload = (e) => {
const { intl, isComposing, hasComposingText, hasMediaAttachments } = this.props;
if (isComposing && (hasComposingText || hasMediaAttachments)) {
// Setting returnValue to any string causes confirmation dialog.
// Many browsers no longer display this text to users,
// but we set user-friendly message for other browsers, e.g. Edge.
e.returnValue = intl.formatMessage(messages.beforeUnload);
}
}
handleLayoutChange = () => { handleLayoutChange = () => {
// The cached heights are no longer accurate, invalidate // The cached heights are no longer accurate, invalidate
this.props.dispatch(clearHeight()); this.props.dispatch(clearHeight());
@ -471,9 +454,8 @@ class UI extends React.PureComponent {
componentDidMount() { componentDidMount() {
const { account } = this.props; const { account } = this.props;
if (!account) return; if (!account) return;
window.addEventListener('beforeunload', this.handleBeforeUnload, false);
window.addEventListener('resize', this.handleResize, { passive: true });
window.addEventListener('resize', this.handleResize, { passive: true });
document.addEventListener('dragenter', this.handleDragEnter, false); document.addEventListener('dragenter', this.handleDragEnter, false);
document.addEventListener('dragover', this.handleDragOver, false); document.addEventListener('dragover', this.handleDragOver, false);
document.addEventListener('drop', this.handleDrop, false); document.addEventListener('drop', this.handleDrop, false);
@ -515,7 +497,6 @@ class UI extends React.PureComponent {
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleBeforeUnload);
window.removeEventListener('resize', this.handleResize); window.removeEventListener('resize', this.handleResize);
document.removeEventListener('dragenter', this.handleDragEnter); document.removeEventListener('dragenter', this.handleDragEnter);
document.removeEventListener('dragover', this.handleDragOver); document.removeEventListener('dragover', this.handleDragOver);