workaround for placeholder being shown when empty text but block. Fixes vector-im/riot-web#7042

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2018-07-17 16:13:33 +01:00
parent 1b467f6ca8
commit 720a728278
No known key found for this signature in database
GPG Key ID: 3F879DA5AD802A5E
1 changed files with 10 additions and 2 deletions

View File

@ -1533,6 +1533,14 @@ export default class MessageComposerInput extends React.Component {
mx_MessageComposer_input_error: this.state.someCompletions === false,
});
const isEmpty = this.state.editorState.document.isEmpty;
let {placeholder} = this.props;
// XXX: workaround for placeholder being shown when there is a formatting block e.g blockquote but no text
if (isEmpty && this.state.editorState.startBlock.type !== DEFAULT_NODE) {
placeholder = undefined;
}
return (
<div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
<div className="mx_MessageComposer_autocomplete_wrapper">
@ -1554,7 +1562,7 @@ export default class MessageComposerInput extends React.Component {
<Editor ref="editor"
dir="auto"
className="mx_MessageComposer_editor"
placeholder={this.props.placeholder}
placeholder={placeholder}
value={this.state.editorState}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
@ -1564,7 +1572,7 @@ export default class MessageComposerInput extends React.Component {
renderNode={this.renderNode}
renderMark={this.renderMark}
// disable spell check for the placeholder because browsers don't like "unencrypted"
spellCheck={!this.state.editorState.document.isEmpty}
spellCheck={!isEmpty}
/>
</div>
</div>