scroll-to-error-plugin

Scroll to an error plugin for Roqueform

Roqueform plugin that enables scrolling to a field that has an associated validation error.

npm install --save-prod @roqueform/scroll-to-error-plugin

Overview

🔎 API documentation is available here.

This plugin works best in conjunction with the errorsPlugin or any of the validation plugins. If an element associated with the field via ref is displayed and an the field is invalid than scrollToError() would scroll the viewport, so the element is reveled on the screen.

This plugin doesn't require any rendering framework. To simplify the usage example, we're going to use the React integration.

import { SyntheticEvent, useEffect } from 'react';
import { composePlugins, errorsPlugin } from 'roqueform';
import { FieldRenderer, useField } from '@roqueform/react';
import { scrollToErrorPlugin } from '@roqueform/scroll-to-error-plugin';

export const App = () => {
  const planetField = useField(
    { name: 'Mars' },
    composePlugins(
      errorsPlugin(),
      scrollToErrorPlugin()
    )
  );

  const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();

    if (planetField.getInvalidFields().length === 0) {
      // Submit the valid form value.
      doSubmit(planetField.value);
    } else {
      // Scroll to the invalid field that is closest to the top left conrner of the document.
      planetField.scrollToError(0, { behavior: 'smooth' });
    }
  };

  useEffect(() => {
    // Mark field as invalid.
    planetField.at('name').addError('Too far away');
  }, []);
  
  return (
    <form onSubmit={handleSubmit}>

      <FieldRenderer field={planetField.at('name')}>
        {nameField => (
          <>
            <input
              // 🟡 Note that the input element ref is populated.
              ref={nameField.ref}
              value={nameField.value}
              onChange={event => {
                nameField.setValue(event.target.value);
              }}
            />
            {nameField.errors}
          </>
        )}
      </FieldRenderer>

      <button type="submit">
        {'Submit'}
      </button>

    </form>
  );
};