Skip to content

Commit

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

Then do the following changes to reimplement previous behavior:
 * at the very start in `componentDidMount` make sure we update
the component with the initial values (coming from state)
 * ensure that autocomplete changes the input values
 * on editing a message set the input text to the previous message
contents
  • Loading branch information
borisyankov committed Jun 28, 2018
1 parent e04cdc5 commit 2345414
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions src/compose/ComposeBox.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ class ComposeBox extends PureComponent<Props, State> {
dispatch(sendTypingEvent(narrow));
};

handleMessageAutocomplete = (message: string) => {
this.setMessageInputValue(message);
};

handleMessageSelectionChange = (event: Object) => {
const { selection } = event.nativeEvent;
this.setState({ selection });
Expand Down Expand Up @@ -229,6 +233,12 @@ class ComposeBox extends PureComponent<Props, State> {
}
};

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

updateTextInput(this.messageInput, message);
}

componentWillUnmount() {
this.tryUpdateDraft();
}
Expand All @@ -239,8 +249,9 @@ class ComposeBox extends PureComponent<Props, State> {
isStreamNarrow(nextProps.narrow) && nextProps.editMessage
? nextProps.editMessage.topic
: '';
const message = nextProps.editMessage ? nextProps.editMessage.content : '';
this.setMessageInputValue(message);
this.setState({
message: nextProps.editMessage ? nextProps.editMessage.content : '',
topic,
});
if (this.messageInput) {
Expand Down Expand Up @@ -286,7 +297,7 @@ class ComposeBox extends PureComponent<Props, State> {
messageSelection={selection}
narrow={narrow}
topicText={topic}
onMessageAutocomplete={this.handleMessageChange}
onMessageAutocomplete={this.handleMessageAutocomplete}
onTopicAutocomplete={this.handleTopicChange}
/>
<View style={styles.composeBox} onLayout={this.handleLayoutChange}>
Expand Down Expand Up @@ -323,7 +334,6 @@ class ComposeBox extends PureComponent<Props, State> {
messageInputRef(component);
}
}}
value={message}
onBlur={this.handleMessageBlur}
onChange={this.handleMessageChange}
onFocus={this.handleMessageFocus}
Expand Down

0 comments on commit 2345414

Please sign in to comment.