inconsistent behavior onBlur

[BernardA]

I have looked at some similar issues, but they did not help me.

I am using react-quill with redux-form. The onBlur event does not triggered when tabbing out of the editor. So, if there's a validation error which normally are displayed when redux-form meta:touched is set to true, it does not show.

Meta:touched is set to true on blur, by the way.

If I manually move the cursor back to the previous field in the form, it will then trigger the blur event and display error, if any.

On the screenshot below you can see that the error exists, but it is not displayed as meta:touched is set to false.

This is the relevant code: ( full code in this repository)

// src/components/textEditor.js

import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import PropTypes from 'prop-types';
import styles from '../styles/mailbox.module.scss';

class TextEditor extends React.Component {
componentDidMount() {
    // fixes tabindex
    const toolspans = document.querySelectorAll('div.ql-toolbar span');
    toolspans.forEach((span) => {
        // eslint-disable-next-line no-param-reassign
        span.tabIndex = -1;
    });
    const toolbuttons = document.querySelectorAll('div.ql-toolbar button');
    toolbuttons.forEach((button) => {
        // eslint-disable-next-line no-param-reassign
        button.tabIndex = -1;
    });
    const editor = document.getElementsByClassName('ql-editor');
    editor[0].tabIndex = 0;
}

onChange = (newValue, delta, source) => {
    const { input } = this.props;
    if (source === 'user') {
        input.onChange(newValue);
    }
};

onBlur = (range, source, quill) => {
    const { input } = this.props;
    console.log('quill HTML', quill.getHTML());
    input.onBlur(quill.getHTML());
};

render() {
    console.log('editor props', this.props);
    const { placeholder, input, meta: { touched, error } } = this.props;
    const modules = {
        keyboard: { bindings: { tab: true } },
    };
    return (
        <>
            <ReactQuill
                {...input}
                onChange={this.onChange}
                onBlur={this.onBlur}
                modules={modules}
                placeholder={placeholder}
                className={styles.textEditor}
            />
            <span className="form_error">{touched ? error : ''}</span>
        </>
    );
}
}

[fabb]

I have a similar issue, but not when tabbing, but when clicking the submit button:

1. Change some text in a quill editor
2. Click the submit button The onBlur of the editor does not trigger. My problem is that I only write the editor content into my state when onBlur happens (for performance reasons not on onChange), and therefore the sent form values are wrong. I use a controlled form. Not really sure how to work around this, probably I need onChange afterall and find another way to fix the performance issues :-/

Update: looks my exact problem is already described in #385