Open BernardA opened 3 years ago
unsubscribe
On Wed, 18 Nov 2020, 5:56 am BernardA, notifications@github.com wrote:
When clearing the editor with backspace, the input.value keeps the HTML like so:
.
This fools the required validation and the form submit is enabled even though the editor is actually empty.
You can test this at this page: https://quiamo-client.vercel.app/contato. Just type something on the message field and then fully clear with with backspace. The form submit will be enabled ( provided you filled in the other fields as well, of course).
I did find a work around this using a specific validation as below ( not yet applied to link above):
From validators.js
export const minLengthWithoutHTML = (min) => (value) => { const newValue = value && value.replace(/<\/?[a-z][a-z0-9][^<>]>/gi, ''); return newValue.length < min ?
${trans[LANG].mustBe} ${min} ${trans[LANG].charactersOrMore}
: undefined; };This is the form field
<div className="form_input"> <Field type="text" name="message" variant="outlined" placeholder={trans[LANG].writeMessage} component={TextEditor} validate={[ required, ]} /> </div>
The TextEditor component:
class TextEditor extends React.Component {
onChange = (newValue, delta, source) => { const { input } = this.props; if (source === 'user') { input.onChange(newValue); } };
onBlur = (range, source, quill) => { const { input } = this.props; input.onBlur(quill.getHTML()); };
render() { const { placeholder, input, meta: { touched, error, form }, classes, } = this.props; const isAdInsertForm = form === 'AdInsertForm'; const isContactEmailForm = form === 'ContactEmailForm'; const toolbarOptions = () => { if (isAdInsertForm || isContactEmailForm) { return false; } return [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ list: 'ordered' }, { list: 'bullet' }], [{ indent: '-1' }, { indent: '+1' }],
['link'], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], [{ align: [] }], ]; }; const modules = { toolbar: toolbarOptions(), // keyboard: { bindings: { tab: true } }, }; return ( <> <ReactQuill {...input} theme="snow" onChange={this.onChange} onBlur={this.onBlur} modules={modules} placeholder={placeholder} className={ isAdInsertForm ? classes.textEditorAd : classes.textEditorMessage } /> <span className="form_error">{touched ? error : ''}</span> </> );
}
} Ticket due diligence
- [x ] I have verified that the issue persists under ReactQuill v2.0.0-beta.2
- I can't use the beta version for other reasons
ReactQuill version
- master
- [x ] v2.0.0-beta.2
- v2.0.0-beta.1
- 1.3.5
- 1.3.4 or older
- Other (fork)
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/zenoamaro/react-quill/issues/675, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOLT2COP27MPHNNJVBT6K23SQLWRVANCNFSM4TZETNOA .
FYI, I have since deployed the workaround I mentioned above.
So the submit button is no longer enabled when clearing the input with backspace.
But the underlying problem still remains. The input value still shows <p><br></p>
after clearing with backspace
Does this happen using plain Quill?
I do not use plain Quill, as it is.
When clearing the editor with backspace, the input.value keeps the HTML like so:
<p><br></p>
.This fools the
required
validation and the form submit is enabled even though the editor is actually empty.You can test this at this page: https://quiamo-client.vercel.app/contato. Just type something on the message field and then fully clear with with backspace. The form submit will be enabled ( provided you filled in the other fields as well, of course).
I did find a work around this using a specific validation as below ( not yet applied to link above):
From validators.js
This is the form field
The TextEditor component:
}
Ticket due diligence
v2.0.0-beta.2
ReactQuill version