redux-form: Set focus in first faulty field

All suggestions (in all corresponding/found issues) for implementing focusing the first field error were failing for me… then I worked out why… when using redux-form/immutable the onSubmitFail errors object does not contain the fields in registration order (possibly requires an ordered list reviver when setting/getting fields?).

Also most do numerous DOM queries (query per field). So I solved it with one single DOM query:

In onSubmitFail Get all the error’ed fields and query them using querySelector. This is the most workable/optimal as querySelector “Returns the first Element within the document that matches the specified selector, or group of selectors.” … so even if the selector is not in field order… it still returns the first error’ed field in the document, then just focus() it.

Could possibly also scrollIntoView() though in my case this failed as the site has a fixed/floating header.

Example

onSubmitFail: (errors) => {
  // # Focus on first error

  // When Immutable:
  // The errors are _not_ in `REGISTER_FIELD` order so we cant just "use" the first one..
  // (possibly requires an ordered list reviver when getting errors?)

  // so we try to get the first error element in another way, using a DOM query:

  // Note: You can't query a possible error class in `onSubmitFail` as the `render` may not have yet happened.

  // We do this using a DOM selector of all the fields that have error'ed and use [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) which
  // Returns the first Element within the document that matches the specified selector, or group of selectors.
  const errorEl = document.querySelector(
    // flattenObject: https://github.com/hughsk/flat/issues/52
    Object.keys(flattenObject(errors)).map(fieldName => `[name="${fieldName}"]`).join(',')
  );
  if (errorEl && errorEl.focus) { // npe
    // if (errorEl.scrollIntoView) {
    //   errorEl.scrollIntoView(); // fails as the site has a fixed/floating header
    // }
    errorEl.focus(); // this scrolls without visible scroll
  }
}

Notes

• The form this is used for does not contain arrays, so I haven’t checked the flattenObject actually creates correct field names
• Have not tested the selector length for large forms
• It is not scoped; Multiple fields with the same name in the same document (i.e. multiple forms with the same field.name) will focus the first found. Though this could be resolved by accessing the passed props and adding a possible className to the selector.

#1336 #488

I just recently started using redux-forms. I am working on an existing project that is using version 6.8.0. (Based on the implementation and the v7 docs, I think it will work in v7 too.)

This solution uses 2 utility functions and the onSubmitFail callback.

// ReduxFormUtils.js
/**
 * Flattens the hierarchical error generated by `redux-form`.
 *
 * @param {object} error - Error object as passed to `onSubmitFail`.
 */
export function flattenError(error) {
  let outErr, outErrs = []

  _flattenError(outErrs, error, '')

  outErr = {}
  outErrs.forEach((err) => {
    outErr[err[0]] = err[1]
  });

  return outErr
}

const _flattenError = (outErrs, error, prefix) => {
  for (let name in error) {
    let value = error[name]
    if (typeof value === 'string') {
      outErrs.push([ prefix + name, value ])
    }
    else if (value instanceof Array) {
      for (let i = 0, iLen = value.length; i < iLen; ++i) {
        _flattenError(outErrs, value[i], prefix + name + '[' + i + '].')
      }
    }
    else {
      _flattenError(outErrs, value, prefix + name + '.')
    }
  }
}

export default {
  flattenError,
}

// FormUtils.js
/**
 * @param {string} formName - The name of the form which may have invalid input
 *   controls.
 * @param {object} error - An object where each key is the name of an invalid
 *   input control in the form with the specified name.
 */
export const focusFirstInvalidControl = (formName, error) => {
  let elmts, form

  form = document.forms[formName]
  elmts = (form || {}).elements || []
  for (let i = 0, iLen = elmts.length; i < iLen; ++i) {
    let elmt = elmts[i]
    if (elmt.name in error) {
      elmt.focus()
      break
    }
  }
}

export default {
  focusFirstInvalidControl,
}

import { reduxForm } from 'redux-form'

import { focusFirstInvalidControl } from './FormUtils'
import { flattenError } from './ReduxFormUtils'
...
const FORM_NAME = 'MyForm'

class MyFormComponent extends React.Component {
  ...
  render() {
    return (
      ...
      <form name={FORM_NAME} ...>
      ...
    )
  }
  ...
}
...

MyFormComponent = reduxForm({
  form: FORM_NAME,
  onSubmitFail: (error, dispatch, submitError, props) => {
    focusFirstInvalidControl(FORM_NAME, flattenError(error))
  },
  ...
})(MyFormComponent)

There are two main steps that need to be done for each form:

1. Add a name attribute to the form element (just reuse the unique one you give to reduxForm)
2. Call the utility functions in the onSubmitFail callback as illustrated above.

This solution solves all the issues I believe have been plaguing everyone.

• Scoped to just one form (just in case you have multiple forms in the DOM with an invalid input control with the same name.)
• Focuses the first invalid input element found in the form.
• No need to try to scroll the element into view. The focusing should take care of that.
• Handles the possibly hierarchical error object created by redux-form.

Notes:

• I have not tested this with checkboxes or radio button controls (but I believe it should work).
• I have not tested it in v7 of redux-forms (but I am pretty sure it should work).
• The two utility functions could be combined into one, but I kept them separate because focusFirstInvalidControl can be used in any HTML document regardless of it being generated by React.

Please let me know if these utilities already exist in an npm package somewhere. If not and you have a cleaner implementation (maybe one that doesn’t use recursion), then please let me know.

Edit: I whipped up an npm package that will set focus on the first invalid control. See qc-dom_utils. You can use the following in place of the FormUtils.js module above.

// Import just the function needed
import focusFirstInvalidControl from 'qc-dom_utils/form/focusFirstInvalidInputControl'
// Or import just the form utilities and use `FormUtils.focusFirstInvalid`
import FormUtils from 'qc-dom_utils/form'
// Or import the whole library and use `DomUtils.form.focusFirstInvalid`
import DomUtils from 'qc-dom_utils'
...

Edit: I searched in npm and I searched the redux-form code base, but I didn’t find anything to flatten the errors. So, I created the qc-redux-form_utils package.

// Import just the function needed
import flattenErrors from 'qc-redux-form_utils/flattenErrors'

Thanks for the details, @AubreyHewes!

Since this issue is very UI specific, it’s not a concern of Redux Form, therefore I’m closing it. Feel free to continue the discussion, though.

I’ve been working on this today and found a solution which I think is a bit more elegant than using document.querySelectorAll, and (with limited testing) seems to work well. In the onSubmitFail method I dispatch the focus action so the active prop of the first failing field is set:

export default reduxForm({
    form: 'contact',
    onSubmitFail: (errors, dispatch) =>
        dispatch(focus('contact', Object.keys(errors)[0]))
})(ContactForm);

Then in the component I pass to Field, I set the focus on the <input> tag in componentDidUpdate via a ref:

export default class Input extends React.Component {
    componentDidUpdate(prevProps) {
        if (!prevProps.meta.active && this.props.meta.active) {
            this.input.focus();
        }
    }
    render() {
        let error;
        if (this.props.meta.touched && this.props.meta.error) {
            error = <div className="form-error">{this.props.meta.error}</div>;
        }

        let warning;
        if (this.props.meta.touched && this.props.meta.warning) {
            warning = (
                <div className="form-warning">{this.props.meta.warning}</div>
            );
        }

        return (
            <div className="form-input">
                <label htmlFor={this.props.input.name}>
                    {this.props.label}
                    {error}
                    {warning}
                </label>
                <input
                    {...this.props.input}
                    id={this.props.input.name}
                    type={this.props.type}
                    ref={input => (this.input = input)}
                />
            </div>
        );
    }
}

If that looks useful and works for other folks then I can put in a PR with some documentation on how to do this.