imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

12
src/components/views/rooms/MessageComposerInput.js
View file

@ -1533,6 +1533,14 @@ export default class MessageComposerInput extends React.Component {
mx_MessageComposer_input_error: this.state.someCompletions === false, 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 ( return (
<div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}> <div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
<div className="mx_MessageComposer_autocomplete_wrapper"> <div className="mx_MessageComposer_autocomplete_wrapper">
@ -1554,7 +1562,7 @@ export default class MessageComposerInput extends React.Component {
<Editor ref="editor" <Editor ref="editor"
dir="auto" dir="auto"
className="mx_MessageComposer_editor" className="mx_MessageComposer_editor"
placeholder={this.props.placeholder} placeholder={placeholder}
value={this.state.editorState} value={this.state.editorState}
onChange={this.onChange} onChange={this.onChange}
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
@ -1564,7 +1572,7 @@ export default class MessageComposerInput extends React.Component {
renderNode={this.renderNode} renderNode={this.renderNode}
renderMark={this.renderMark} renderMark={this.renderMark}
// disable spell check for the placeholder because browsers don't like "unencrypted" // disable spell check for the placeholder because browsers don't like "unencrypted"
spellCheck={!this.state.editorState.document.isEmpty} spellCheck={!isEmpty}
/> />
</div> </div>
</div> </div>