@rjsf/core 5.0.2 → 5.1.0

package/dist/core.esm.js

@@ -3,6 +3,7 @@ import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplat
 import get from 'lodash-es/get';
 import isEmpty from 'lodash-es/isEmpty';
 import _pick from 'lodash-es/pick';
+import _toPath from 'lodash-es/toPath';
 import isObject from 'lodash-es/isObject';
 import set from 'lodash-es/set';
 import { nanoid } from 'nanoid';
@@ -2627,6 +2628,7 @@ function AltDateWidget(_ref2) {
     className: "list-inline"
   }, dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
     return /*#__PURE__*/React.createElement("li", {
+      className: "list-inline-item",
       key: i
     }, /*#__PURE__*/React.createElement(DateElement, _extends({
       rootId: id,
@@ -2639,11 +2641,15 @@ function AltDateWidget(_ref2) {
       onFocus: onFocus,
       autofocus: autofocus && i === 0
     })));
-  }), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+  }), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React.createElement("li", {
+    className: "list-inline-item"
+  }, /*#__PURE__*/React.createElement("a", {
     href: "#",
     className: "btn btn-info btn-now",
     onClick: handleSetNow
-  }, "Now")), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
+  }, "Now")), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React.createElement("li", {
+    className: "list-inline-item"
+  }, /*#__PURE__*/React.createElement("a", {
     href: "#",
     className: "btn btn-warning btn-clear",
     onClick: handleClear
@@ -3516,7 +3522,7 @@ var Form = /*#__PURE__*/function (_Component) {
     if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema)) {
       schemaUtils = createSchemaUtils(props.validator, rootSchema);
     }
-    var formData = schemaUtils.getDefaultFormState(schema, inputFormData, "excludeObjectChildren");
+    var formData = schemaUtils.getDefaultFormState(schema, inputFormData);
     var retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
     var getCurrentErrors = function getCurrentErrors() {
       if (props.noValidate) {
@@ -3656,15 +3662,47 @@ var Form = /*#__PURE__*/function (_Component) {
       this.formElement.current.requestSubmit();
     }
   }
+  /** Attempts to focus on the field associated with the `error`. Uses the `property` field to compute path of the error
+   * field, then, using the `idPrefix` and `idSeparator` converts that path into an id. Then the input element with that
+   * id is attempted to be found using the `formElement` ref. If it is located, then it is focused.
+   *
+   * @param error - The error on which to focus
+   */;
+  _proto.focusOnError = function focusOnError(error) {
+    var _this$props4 = this.props,
+      _this$props4$idPrefix = _this$props4.idPrefix,
+      idPrefix = _this$props4$idPrefix === void 0 ? "root" : _this$props4$idPrefix,
+      _this$props4$idSepara = _this$props4.idSeparator,
+      idSeparator = _this$props4$idSepara === void 0 ? "_" : _this$props4$idSepara;
+    var property = error.property;
+    var path = _toPath(property);
+    if (path[0] === "") {
+      // Most of the time the `.foo` property results in the first element being empty, so replace it with the idPrefix
+      path[0] = idPrefix;
+    } else {
+      // Otherwise insert the idPrefix into the first location using unshift
+      path.unshift(idPrefix);
+    }
+    var elementId = path.join(idSeparator);
+    var 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) {
+      field.focus();
+    }
+  }
   /** Programmatically validate the form. If `onError` is provided, then it will be called with the list of errors the
    * same way as would happen on form submission.
    *
    * @returns - True if the form is valid, false otherwise.
    */;
   _proto.validateForm = function validateForm() {
-    var _this$props4 = this.props,
-      extraErrors = _this$props4.extraErrors,
-      onError = _this$props4.onError;
+    var _this$props5 = this.props,
+      extraErrors = _this$props5.extraErrors,
+      focusOnFirstError = _this$props5.focusOnFirstError,
+      onError = _this$props5.onError;
     var formData = this.state.formData;
     var schemaUtils = this.state.schemaUtils;
     var schemaValidation = this.validate(formData);
@@ -3678,6 +3716,9 @@ var Form = /*#__PURE__*/function (_Component) {
         errorSchema = merged.errorSchema;
         errors = merged.errors;
       }
+      if (focusOnFirstError) {
+        this.focusOnError(schemaValidation.errors[0]);
+      }
       this.setState({
         errors: errors,
         errorSchema: errorSchema,
@@ -3698,31 +3739,31 @@ var Form = /*#__PURE__*/function (_Component) {
    * needed along with the submit button or any children of the form.
    */;
   _proto.render = function render() {
-    var _this$props5 = this.props,
-      children = _this$props5.children,
-      id = _this$props5.id,
-      idPrefix = _this$props5.idPrefix,
-      idSeparator = _this$props5.idSeparator,
-      _this$props5$classNam = _this$props5.className,
-      className = _this$props5$classNam === void 0 ? "" : _this$props5$classNam,
-      tagName = _this$props5.tagName,
-      name = _this$props5.name,
-      method = _this$props5.method,
-      target = _this$props5.target,
-      action = _this$props5.action,
-      autoComplete = _this$props5.autoComplete,
-      enctype = _this$props5.enctype,
-      acceptcharset = _this$props5.acceptcharset,
-      _this$props5$noHtml5V = _this$props5.noHtml5Validate,
-      noHtml5Validate = _this$props5$noHtml5V === void 0 ? false : _this$props5$noHtml5V,
-      _this$props5$disabled = _this$props5.disabled,
-      disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
-      _this$props5$readonly = _this$props5.readonly,
-      readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
-      formContext = _this$props5.formContext,
-      _this$props5$showErro = _this$props5.showErrorList,
-      showErrorList = _this$props5$showErro === void 0 ? "top" : _this$props5$showErro,
-      _internalFormWrapper = _this$props5._internalFormWrapper;
+    var _this$props6 = this.props,
+      children = _this$props6.children,
+      id = _this$props6.id,
+      idPrefix = _this$props6.idPrefix,
+      idSeparator = _this$props6.idSeparator,
+      _this$props6$classNam = _this$props6.className,
+      className = _this$props6$classNam === void 0 ? "" : _this$props6$classNam,
+      tagName = _this$props6.tagName,
+      name = _this$props6.name,
+      method = _this$props6.method,
+      target = _this$props6.target,
+      action = _this$props6.action,
+      autoComplete = _this$props6.autoComplete,
+      enctype = _this$props6.enctype,
+      acceptcharset = _this$props6.acceptcharset,
+      _this$props6$noHtml5V = _this$props6.noHtml5Validate,
+      noHtml5Validate = _this$props6$noHtml5V === void 0 ? false : _this$props6$noHtml5V,
+      _this$props6$disabled = _this$props6.disabled,
+      disabled = _this$props6$disabled === void 0 ? false : _this$props6$disabled,
+      _this$props6$readonly = _this$props6.readonly,
+      readonly = _this$props6$readonly === void 0 ? false : _this$props6$readonly,
+      formContext = _this$props6.formContext,
+      _this$props6$showErro = _this$props6.showErrorList,
+      showErrorList = _this$props6$showErro === void 0 ? "top" : _this$props6$showErro,
+      _internalFormWrapper = _this$props6._internalFormWrapper;
     var _this$state4 = this.state,
       schema = _this$state4.schema,
       uiSchema = _this$state4.uiSchema,