Skip to content

Commit

Permalink
compose: Make topic input uncontrolled.
Browse files Browse the repository at this point in the history
Remove the `value={topic}` from topic text input, making it
an uncontrolled component.

To replicate the previous behavior:
 * initialize at the start in `componentDidMount`
 * make sure the topic input text is updated when we focus on
   the message input (it is invisible until then)
 * change the text on picking a topic autocomplete suggestion

Fixes zulip#2589.
  • Loading branch information
borisyankov authored and gnprice committed Jun 30, 2018
1 parent 8f643ff commit 1f9ad56
Showing 1 changed file with 14 additions and 5 deletions.
19 changes: 14 additions & 5 deletions src/compose/ComposeBox.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,11 @@ class ComposeBox extends PureComponent<Props, State> {
this.handleMessageChange(message);
};

setTopicInputValue = (topic: string) => {
updateTextInput(this.topicInput, topic);
this.handleTopicChange(topic);
};

handleComposeMenuToggle = () => {
this.setState(({ isMenuExpanded }) => ({
isMenuExpanded: !isMenuExpanded,
Expand All @@ -140,6 +145,10 @@ class ComposeBox extends PureComponent<Props, State> {
this.setState({ topic, isMenuExpanded: false });
};

handleTopicAutocomplete = (topic: string) => {
this.setTopicInputValue(topic);
};

handleMessageChange = (message: string) => {
this.setState({ message, isMenuExpanded: false });
const { dispatch, narrow } = this.props;
Expand All @@ -163,7 +172,7 @@ class ComposeBox extends PureComponent<Props, State> {
isMenuExpanded: false,
});
setTimeout(() => {
this.handleTopicChange(topic || lastMessageTopic);
this.setTopicInputValue(topic || lastMessageTopic);
}, 200); // wait, to hope the component is shown
};

Expand Down Expand Up @@ -241,9 +250,10 @@ class ComposeBox extends PureComponent<Props, State> {
};

componentDidMount() {
const { message } = this.state;
const { message, topic } = this.state;

updateTextInput(this.messageInput, message);
updateTextInput(this.topicInput, topic);
}

componentWillUnmount() {
Expand All @@ -258,7 +268,7 @@ class ComposeBox extends PureComponent<Props, State> {
: '';
const message = nextProps.editMessage ? nextProps.editMessage.content : '';
this.setMessageInputValue(message);
this.handleTopicChange(topic);
this.setTopicInputValue(topic);
if (this.messageInput) {
this.messageInput.focus();
}
Expand Down Expand Up @@ -303,7 +313,7 @@ class ComposeBox extends PureComponent<Props, State> {
narrow={narrow}
topicText={topic}
onMessageAutocomplete={this.handleMessageAutocomplete}
onTopicAutocomplete={this.handleTopicChange}
onTopicAutocomplete={this.handleTopicAutocomplete}
/>
<View style={styles.composeBox} onLayout={this.handleLayoutChange}>
<View style={styles.alignBottom}>
Expand All @@ -327,7 +337,6 @@ class ComposeBox extends PureComponent<Props, State> {
onFocus={this.handleTopicFocus}
onBlur={this.handleTopicBlur}
onTouchStart={this.handleInputTouchStart}
value={topic}
/>
)}
<MultilineInput
Expand Down

0 comments on commit 1f9ad56

Please sign in to comment.