v2 - does not clear input value with Redux

[BernardA]

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

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)

[kazuhideoki]

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 .

[BernardA]

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

[alexkrolick]

Does this happen using plain Quill?

[BernardA]

I do not use plain Quill, as it is.