Allow custom focusOnError

[Fronix]

Prerequisites

• I have read the documentation

What theme are you using?

core

Is your feature request related to a problem? Please describe.

Our forms sometimes have disabled fields that are automatically filled by doing some type of action.
Example: Address fields that are readonly but are filled if you search and select the adress, this will then automatically fill in the fields. The adress fields are required because it wouldn't make sense to have the search field required.

The problem here is that when i use focusOnFirstError it wont trigger on fields that are disabled or readonly.

react-jsonschema-form/packages/core/src/components/Form.tsx

Lines 691 to 703 in ff46301

	let field = this.formElement.current.elements[elementId];
	if (!field) {
	// if not an exact match, try finding an input starting with the element id (like radio buttons or checkboxes)
	field = this.formElement.current.querySelector(`input[id^=${elementId}`);
	}
	if (field.length) {
	// If we got a list with length > 0
	field = field[0];
	}
	if (field) {
	field.focus();
	}
	}

This might be a very niche issue but it's quite important from a UX standpoint.

Describe the solution you'd like

There are different solutions that would work.

1. Let us provide our own callback for focusOnError, this would give the most freedom.
2. Add a check if the element is disabled/readonly and instead call element.scrollIntoViewIfNeeded(true) might have to use element.scrollIntoView() since support for IfNeeded is not complete.

Describe alternatives you've considered

No response

[heath-freenome]

@Fronix If I had the time to do this any time soon, I would make the focusOnFirstError property also take a callback as an option. Something like:

  /** If set to true, then the first field with an error will receive the focus when the form is submitted with errors
   */
  focusOnFirstError?: boolean | (error: RJSFValidationError) => void;

And then change the code in Form to look something like:

if (focusOnFirstError) {
  if (typeof focusOnFirstError === 'function') {
    focusOnFirstError(schemaValidation.errors[0]);
  } else {
    this.focusOnError(schemaValidation.errors[0]);
  }
}

Are you willing to make this change yourself and push a PR, adding the necessary tests?