Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-21 07:46:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

[composer] Fix weird refocusing when plugins load

Browse source 
Summary:
We weren't properly keeping track of the focus state in the ComposerView which
would cause us to lose track of what was focused when plugins were eventually
loaded.

Test Plan: Run locally, verify that we don't lose focus

Reviewers: evan, juan

Reviewed By: juan

Differential Revision: https://phab.nylas.com/D3801
This commit is contained in:
Mark Hahnenberg 2017-01-27 12:02:40 -08:00
parent 70a04aff19
commit 173ac2bd1a
2 changed files with 51 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
internal_packages/composer/lib/composer-header.jsx
View file

@ -55,6 +55,16 @@ export default class ComposerHeader extends React.Component {
}
}
focus() {
if (this.state.subjectFocused) {
this.refs.subject.focus();
} else if (this.state.participantsFocused) {
this.showAndFocusField(Fields.To);
}
console.warning("Nothing is marked as focused. This shouldn't happen!");
this.showAndFocusField(Fields.To);
}
showAndFocusField = (fieldName) => {
const enabledFields = _.uniq([].concat(this.state.enabledFields, [fieldName]));
const participantsFocused = this.state.participantsFocused || Fields.ParticipantFields.includes(fieldName);
@ -105,6 +115,7 @@ export default class ComposerHeader extends React.Component {
return {
enabledFields,
participantsFocused: props.initiallyFocused,
subjectFocused: false,
};
}
@ -156,6 +167,22 @@ export default class ComposerHeader extends React.Component {
});
}
_onFocusInSubject = () => {
this.setState({
subjectFocused: true,
});
}
_onFocusOutSubject = () => {
this.setState({
subjectFocused: false,
});
}
isFocused() {
return this.state.participantsFocused || this.state.subjectFocused;
}
_onDragCollapsedParticipants = ({isDropping}) => {
if (isDropping) {
this.setState({
@ -202,21 +229,28 @@ export default class ComposerHeader extends React.Component {
}
const {draft, session} = this.props
return (
<InjectedComponent
ref={Fields.Subject}
key="subject-wrap"
matching={{role: 'Composer:SubjectTextField'}}
exposedProps={{
draft,
session,
value: draft.subject,
draftClientId: draft.clientId,
onSubjectChange: this._onSubjectChange,
}}
requiredMethods={['focus']}
fallback={SubjectTextField}
onComponentDidChange={this.props.onNewHeaderComponents}
/>
<KeyCommandsRegion
tabIndex={-1}
ref="subjectContainer"
onFocusIn={this._onFocusInSubject}
onFocusOut={this._onFocusOutSubject}
>
<InjectedComponent
ref={Fields.Subject}
key="subject-wrap"
matching={{role: 'Composer:SubjectTextField'}}
exposedProps={{
draft,
session,
value: draft.subject,
draftClientId: draft.clientId,
onSubjectChange: this._onSubjectChange,
}}
requiredMethods={['focus']}
fallback={SubjectTextField}
onComponentDidChange={this.props.onNewHeaderComponents}
/>
</KeyCommandsRegion>
)
}

6
internal_packages/composer/lib/composer-view.jsx
View file

@ -76,10 +76,8 @@ export default class ComposerView extends React.Component {
}
focus() {
if (this.props.draft.to.length === 0) {
this.refs.header.showAndFocusField(Fields.To);
} else if ((this.props.draft.subject || "").trim().length === 0) {
this.refs.header.showAndFocusField(Fields.Subject);
if (this.refs.header.isFocused()) {
this.refs.header.focus();
} else {
this.refs[Fields.Body].focus();
}