react-final-form auto submit on blur

AutoSubmitOnBlur.js

import diff from "object-diff";
import React from "react";
import { FormSpy } from "react-final-form";

class AutoSubmitOnBlur extends React.Component {
  state = {
    active: null,
    values: {}
  };

  onFormSpyChange = async ({ active, values }) => {
    const isBlurEvent = this.state.active && this.state.active !== active;

    if (isBlurEvent) {
      if (this.onBlurPromise) {
        await this.onBlurPromise;
      }

      const difference = diff(this.state.values, values);
      const hasChanges = Object.keys(difference).length;
      this.setState({ active, values });

      if (hasChanges) {
        this.onBlurPromise = this.props.onBlur();
        await this.onBlurPromise;
        delete this.onBlurPromise;
      }
    } else {
      this.setState({ active });
    }
  };

  render() {
    return (
      <FormSpy
        subscription={{ active: true, values: true }}
        onChange={this.onFormSpyChange}
      />
    );
  }
}

export default AutoSubmitOnBlur;