@rjsf/core 6.4.2 → 6.5.0

package/dist/core.umd.js

@@ -1859,10 +1859,13 @@
     } = props;
     const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
     const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+    const formDataRef = react.useRef(formData);
+    formDataRef.current = formData;
     const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
     const uiOptions = utils.getUiOptions(uiSchema, globalUiOptions);
     const { properties: schemaProperties = {} } = schema;
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+    const lastRenamedProperty = react.useRef({ previousKey: "", currentKey: void 0 });
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
     const renderOptionalField = utils.shouldRenderOptionalField(registry, schema, required, uiSchema);
@@ -1912,14 +1915,19 @@
         const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
         set(newFormData, newKey, newValue);
       }
+      if (lastRenamedProperty.current.previousKey === newKey) {
+        lastRenamedProperty.current.currentKey = newKey;
+        lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
+      }
       onChange(newFormData, childFieldPathId.path);
     }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
     const handleKeyRename = react.useCallback(
       (oldKey, newKey) => {
         if (oldKey !== newKey) {
-          const actualNewKey = getAvailableKey(newKey, formData);
+          const currentFormData = formDataRef.current;
+          const actualNewKey = getAvailableKey(newKey, currentFormData);
           const newFormData = {
-            ...formData
+            ...currentFormData
           };
           const newKeys = { [oldKey]: actualNewKey };
           const keyValues = Object.keys(newFormData).map((key) => {
@@ -1927,10 +1935,15 @@
             return { [newKey2]: newFormData[key] };
           });
           const renamedObj = Object.assign({}, ...keyValues);
+          formDataRef.current = renamedObj;
+          if (oldKey !== lastRenamedProperty.current.currentKey) {
+            lastRenamedProperty.current.previousKey = oldKey;
+          }
+          lastRenamedProperty.current.currentKey = actualNewKey;
           onChange(renamedObj, childFieldPathId.path);
         }
       },
-      [formData, onChange, childFieldPathId, getAvailableKey]
+      [onChange, childFieldPathId, getAvailableKey]
     );
     const handleRemoveProperty = react.useCallback(
       (key) => {
@@ -1938,6 +1951,12 @@
       },
       [onChange, childFieldPathId]
     );
+    const getStableKey = react.useCallback((property) => {
+      if (lastRenamedProperty.current.currentKey === property) {
+        return lastRenamedProperty.current.previousKey;
+      }
+      return property;
+    }, []);
     if (!renderOptionalField || hasFormData) {
       try {
         const properties = Object.keys(schemaProperties);
@@ -1980,7 +1999,7 @@
             readonly,
             hideError
           },
-          name2
+          getStableKey(name2)
         );
         return {
           content,
@@ -3087,7 +3106,8 @@
             id: `${id}-key`,
             onBlur: onKeyRenameBlur,
             defaultValue: label
-          }
+          },
+          label
         )
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-additional form-group col-xs-5", children }),
@@ -3239,7 +3259,7 @@
   function CheckboxesWidget({
     id,
     disabled,
-    options: { inline = false, enumOptions, enumDisabled, emptyValue },
+    options,
     value,
     autofocus = false,
     readonly,
@@ -3248,14 +3268,16 @@
     onFocus,
     htmlName
   }) {
+    const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, id, enumOptions, emptyValue]
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onBlur, id, enumOptions, emptyValue, optionValueFormat]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, id, enumOptions, emptyValue]
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onFocus, id, enumOptions, emptyValue, optionValueFormat]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
@@ -3276,7 +3298,7 @@
             id: utils.optionId(id, index),
             name: htmlName || id,
             checked,
-            value: String(index),
+            value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
             disabled: disabled || itemDisabled || readonly,
             autoFocus: autofocus && index === 0,
             onChange: handleChange,
@@ -3421,13 +3443,14 @@
     htmlName
   }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const handleBlur = react.useCallback(
-      ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onBlur, enumOptions, emptyValue, id]
+      ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onBlur, enumOptions, emptyValue, id, optionValueFormat]
     );
     const handleFocus = react.useCallback(
-      ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue)),
-      [onFocus, enumOptions, emptyValue, id]
+      ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+      [onFocus, enumOptions, emptyValue, id, optionValueFormat]
     );
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
       const checked = utils.enumOptionsIsSelected(option.value, value);
@@ -3443,7 +3466,7 @@
             checked,
             name: htmlName || id,
             required,
-            value: String(i),
+            value: utils.enumOptionValueEncoder(option.value, i, optionValueFormat),
             disabled: disabled || itemDisabled || readonly,
             autoFocus: autofocus && i === 0,
             onChange: handleChange,
@@ -3594,28 +3617,29 @@
   }) {
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
     const emptyValue = multiple ? [] : "";
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const handleFocus = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
-        return onFocus(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+        return onFocus(id, utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
-      [onFocus, id, multiple, enumOptions, optEmptyVal]
+      [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
     const handleBlur = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
-        return onBlur(id, utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+        return onBlur(id, utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
-      [onBlur, id, multiple, enumOptions, optEmptyVal]
+      [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
     const handleChange = react.useCallback(
       (event) => {
         const newValue = getValue(event, multiple);
-        return onChange(utils.enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
+        return onChange(utils.enumOptionValueDecoder(newValue, enumOptions, optionValueFormat, optEmptyVal));
       },
-      [onChange, multiple, enumOptions, optEmptyVal]
+      [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat]
     );
-    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
+    const selectValue = utils.enumOptionSelectedValue(value, enumOptions, multiple, optionValueFormat, emptyValue);
     const showPlaceholderOption = !multiple && schema.default === void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
@@ -3625,7 +3649,7 @@
         multiple,
         role: "combobox",
         className: "form-control",
-        value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+        value: selectValue,
         required,
         disabled: disabled || readonly,
         autoFocus: autofocus,
@@ -3637,7 +3661,7 @@
           showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
           Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
             const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: String(i), disabled: disabled2, children: label }, i);
+            return /* @__PURE__ */ jsxRuntime.jsx("option", { value: utils.enumOptionValueEncoder(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
           })
         ]
       }
@@ -4005,12 +4029,11 @@
       }
       const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
       const registry = utils.deepEquals(state.registry, newRegistry) ? state.registry : newRegistry;
-      const expandedUiSchema = registry.uiSchemaDefinitions ? utils.expandUiSchemaDefinitions(rootSchema, uiSchema, registry) : uiSchema;
       const fieldPathId = state.fieldPathId && state.fieldPathId?.[utils.ID_KEY] === registry.globalFormOptions.idPrefix ? state.fieldPathId : utils.toFieldPathId("", registry.globalFormOptions);
       const nextState = {
         schemaUtils,
         schema: rootSchema,
-        uiSchema: expandedUiSchema,
+        uiSchema,
         fieldPathId,
         formData,
         edit,
@@ -4192,7 +4215,7 @@
       this._isProcessingUserChange = true;
       const { newValue, path, id } = this.pendingChanges[0];
       const { newErrorSchema } = this.pendingChanges[0];
-      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+      const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, removeEmptyOptionalObjects } = this.props;
       const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
       let { customErrors, errorSchema: originalErrorSchema } = this.state;
       const rootPathId = fieldPathId.path[0] || "";
@@ -4221,6 +4244,18 @@
           formData: newFormData
         };
       }
+      if (removeEmptyOptionalObjects) {
+        newFormData = utils.removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+        state = {
+          ...state,
+          formData: newFormData
+        };
+      }
       if (newErrorSchema) {
         const oldValidationError = !isRootPath ? get(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
         if (!isEmpty(oldValidationError)) {
@@ -4321,24 +4356,33 @@
      * @param data - The data associated with the field that was blurred
      */
     onBlur = (id, data) => {
-      const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
+      const { onBlur, omitExtraData, liveOmit, liveValidate, removeEmptyOptionalObjects } = this.props;
       if (onBlur) {
         onBlur(id, data);
       }
       if (omitExtraData === true && liveOmit === "onBlur" || liveValidate === "onBlur") {
         const { onChange, extraErrors } = this.props;
-        const { formData } = this.state;
+        const { formData, schemaUtils, schema } = this.state;
         let newFormData = formData;
         let state = { formData: newFormData };
         if (omitExtraData === true && liveOmit === "onBlur") {
           newFormData = this.omitExtraData(formData);
           state = { formData: newFormData };
         }
+        if (removeEmptyOptionalObjects) {
+          newFormData = utils.removeOptionalEmptyObjects(
+            schemaUtils.getValidator(),
+            schema,
+            schemaUtils.getRootSchema(),
+            newFormData
+          );
+          state = { ...state, formData: newFormData };
+        }
         if (liveValidate === "onBlur") {
-          const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+          const { schema: schema2, schemaUtils: schemaUtils2, errorSchema, customErrors, retrievedSchema } = this.state;
           const liveValidation = this.liveValidate(
-            schema,
-            schemaUtils,
+            schema2,
+            schemaUtils2,
             errorSchema,
             newFormData,
             extraErrors,
@@ -4385,11 +4429,20 @@
         return;
       }
       event.persist();
-      const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+      const { omitExtraData, extraErrors, noValidate, onSubmit, removeEmptyOptionalObjects } = this.props;
       let { formData: newFormData } = this.state;
       if (omitExtraData === true) {
         newFormData = this.omitExtraData(newFormData);
       }
+      if (removeEmptyOptionalObjects) {
+        const { schemaUtils, schema } = this.state;
+        newFormData = utils.removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+      }
       if (noValidate || this.validateFormWithFormData(newFormData)) {
         const errorSchema = extraErrors || {};
         const errors = extraErrors ? utils.toErrorList(extraErrors) : [];
@@ -4486,7 +4539,7 @@
       const elementId = path.join(idSeparator);
       let field = this.formElement.current.elements[elementId];
       if (!field) {
-        field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
+        field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
       }
       if (field && field.length) {
         field = field[0];
@@ -4554,11 +4607,20 @@
      * @returns - True if the form is valid, false otherwise.
      */
     validateForm() {
-      const { omitExtraData } = this.props;
+      const { omitExtraData, removeEmptyOptionalObjects } = this.props;
       let { formData: newFormData } = this.state;
       if (omitExtraData === true) {
         newFormData = this.omitExtraData(newFormData);
       }
+      if (removeEmptyOptionalObjects) {
+        const { schemaUtils, schema } = this.state;
+        newFormData = utils.removeOptionalEmptyObjects(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+      }
       return this.validateFormWithFormData(newFormData);
     }
     /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if

package/dist/index.cjs

@@ -1988,10 +1988,13 @@ function ObjectField(props) {
   } = props;
   const { fields: fields2, schemaUtils, translateString, globalUiOptions } = registry;
   const { OptionalDataControlsField: OptionalDataControlsField2 } = fields2;
+  const formDataRef = (0, import_react8.useRef)(formData);
+  formDataRef.current = formData;
   const schema = schemaUtils.retrieveSchema(rawSchema, formData, true);
   const uiOptions = (0, import_utils9.getUiOptions)(uiSchema, globalUiOptions);
   const { properties: schemaProperties = {} } = schema;
   const childFieldPathId = props.childFieldPathId ?? fieldPathId;
+  const lastRenamedProperty = (0, import_react8.useRef)({ previousKey: "", currentKey: void 0 });
   const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
   const description = uiOptions.description ?? schema.description;
   const renderOptionalField = (0, import_utils9.shouldRenderOptionalField)(registry, schema, required, uiSchema);
@@ -2041,14 +2044,19 @@ function ObjectField(props) {
       const newValue = constValue ?? defaultValue ?? getDefaultValue(translateString2, type);
       (0, import_set4.default)(newFormData, newKey, newValue);
     }
+    if (lastRenamedProperty.current.previousKey === newKey) {
+      lastRenamedProperty.current.currentKey = newKey;
+      lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
+    }
     onChange(newFormData, childFieldPathId.path);
   }, [formData, onChange, registry, childFieldPathId, getAvailableKey, schema]);
   const handleKeyRename = (0, import_react8.useCallback)(
     (oldKey, newKey) => {
       if (oldKey !== newKey) {
-        const actualNewKey = getAvailableKey(newKey, formData);
+        const currentFormData = formDataRef.current;
+        const actualNewKey = getAvailableKey(newKey, currentFormData);
         const newFormData = {
-          ...formData
+          ...currentFormData
         };
         const newKeys = { [oldKey]: actualNewKey };
         const keyValues = Object.keys(newFormData).map((key) => {
@@ -2056,10 +2064,15 @@ function ObjectField(props) {
           return { [newKey2]: newFormData[key] };
         });
         const renamedObj = Object.assign({}, ...keyValues);
+        formDataRef.current = renamedObj;
+        if (oldKey !== lastRenamedProperty.current.currentKey) {
+          lastRenamedProperty.current.previousKey = oldKey;
+        }
+        lastRenamedProperty.current.currentKey = actualNewKey;
         onChange(renamedObj, childFieldPathId.path);
       }
     },
-    [formData, onChange, childFieldPathId, getAvailableKey]
+    [onChange, childFieldPathId, getAvailableKey]
   );
   const handleRemoveProperty = (0, import_react8.useCallback)(
     (key) => {
@@ -2067,6 +2080,12 @@ function ObjectField(props) {
     },
     [onChange, childFieldPathId]
   );
+  const getStableKey = (0, import_react8.useCallback)((property) => {
+    if (lastRenamedProperty.current.currentKey === property) {
+      return lastRenamedProperty.current.previousKey;
+    }
+    return property;
+  }, []);
   if (!renderOptionalField || hasFormData) {
     try {
       const properties = Object.keys(schemaProperties);
@@ -2109,7 +2128,7 @@ function ObjectField(props) {
           readonly,
           hideError
         },
-        name2
+        getStableKey(name2)
       );
       return {
         content,
@@ -3345,7 +3364,8 @@ function WrapIfAdditionalTemplate(props) {
           id: `${id}-key`,
           onBlur: onKeyRenameBlur,
           defaultValue: label
-        }
+        },
+        label
       )
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "form-additional form-group col-xs-5", children }),
@@ -3514,7 +3534,7 @@ var import_jsx_runtime42 = require("react/jsx-runtime");
 function CheckboxesWidget({
   id,
   disabled,
-  options: { inline = false, enumOptions, enumDisabled, emptyValue },
+  options,
   value,
   autofocus = false,
   readonly,
@@ -3523,14 +3543,16 @@ function CheckboxesWidget({
   onFocus,
   htmlName
 }) {
+  const { inline = false, enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = (0, import_utils35.getOptionValueFormat)(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const handleBlur = (0, import_react14.useCallback)(
-    ({ target }) => onBlur(id, (0, import_utils35.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onBlur, id, enumOptions, emptyValue]
+    ({ target }) => onBlur(id, (0, import_utils35.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, id, enumOptions, emptyValue, optionValueFormat]
   );
   const handleFocus = (0, import_react14.useCallback)(
-    ({ target }) => onFocus(id, (0, import_utils35.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onFocus, id, enumOptions, emptyValue]
+    ({ target }) => onFocus(id, (0, import_utils35.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, id, enumOptions, emptyValue, optionValueFormat]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "checkboxes", id, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = (0, import_utils35.enumOptionsIsSelected)(option.value, checkboxesValues);
@@ -3551,7 +3573,7 @@ function CheckboxesWidget({
           id: (0, import_utils35.optionId)(id, index),
           name: htmlName || id,
           checked,
-          value: String(index),
+          value: (0, import_utils35.enumOptionValueEncoder)(option.value, index, optionValueFormat),
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
           onChange: handleChange,
@@ -3730,13 +3752,14 @@ function RadioWidget({
   htmlName
 }) {
   const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const optionValueFormat = (0, import_utils42.getOptionValueFormat)(options);
   const handleBlur = (0, import_react16.useCallback)(
-    ({ target }) => onBlur(id, (0, import_utils42.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onBlur, enumOptions, emptyValue, id]
+    ({ target }) => onBlur(id, (0, import_utils42.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onBlur, enumOptions, emptyValue, id, optionValueFormat]
   );
   const handleFocus = (0, import_react16.useCallback)(
-    ({ target }) => onFocus(id, (0, import_utils42.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue)),
-    [onFocus, enumOptions, emptyValue, id]
+    ({ target }) => onFocus(id, (0, import_utils42.enumOptionValueDecoder)(target && target.value, enumOptions, optionValueFormat, emptyValue)),
+    [onFocus, enumOptions, emptyValue, id, optionValueFormat]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "field-radio-group", id, role: "radiogroup", children: Array.isArray(enumOptions) && enumOptions.map((option, i) => {
     const checked = (0, import_utils42.enumOptionsIsSelected)(option.value, value);
@@ -3752,7 +3775,7 @@ function RadioWidget({
           checked,
           name: htmlName || id,
           required,
-          value: String(i),
+          value: (0, import_utils42.enumOptionValueEncoder)(option.value, i, optionValueFormat),
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && i === 0,
           onChange: handleChange,
@@ -3915,28 +3938,29 @@ function SelectWidget({
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
   const emptyValue = multiple ? [] : "";
+  const optionValueFormat = (0, import_utils43.getOptionValueFormat)(options);
   const handleFocus = (0, import_react18.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onFocus(id, (0, import_utils43.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onFocus(id, (0, import_utils43.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onFocus, id, multiple, enumOptions, optEmptyVal]
+    [onFocus, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
   const handleBlur = (0, import_react18.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onBlur(id, (0, import_utils43.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onBlur(id, (0, import_utils43.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onBlur, id, multiple, enumOptions, optEmptyVal]
+    [onBlur, id, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
   const handleChange = (0, import_react18.useCallback)(
     (event) => {
       const newValue = getValue(event, multiple);
-      return onChange((0, import_utils43.enumOptionsValueForIndex)(newValue, enumOptions, optEmptyVal));
+      return onChange((0, import_utils43.enumOptionValueDecoder)(newValue, enumOptions, optionValueFormat, optEmptyVal));
     },
-    [onChange, multiple, enumOptions, optEmptyVal]
+    [onChange, multiple, enumOptions, optEmptyVal, optionValueFormat]
   );
-  const selectedIndexes = (0, import_utils43.enumOptionsIndexForValue)(value, enumOptions, multiple);
+  const selectValue = (0, import_utils43.enumOptionSelectedValue)(value, enumOptions, multiple, optionValueFormat, emptyValue);
   const showPlaceholderOption = !multiple && schema.default === void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "select",
@@ -3946,7 +3970,7 @@ function SelectWidget({
       multiple,
       role: "combobox",
       className: "form-control",
-      value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+      value: selectValue,
       required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
@@ -3958,7 +3982,7 @@ function SelectWidget({
         showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("option", { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label }, i) => {
           const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("option", { value: String(i), disabled: disabled2, children: label }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("option", { value: (0, import_utils43.enumOptionValueEncoder)(value2, i, optionValueFormat), disabled: disabled2, children: label }, i);
         })
       ]
     }
@@ -4351,12 +4375,11 @@ var Form = class extends import_react21.Component {
     }
     const newRegistry = this.getRegistry(props, rootSchema, schemaUtils);
     const registry = (0, import_utils50.deepEquals)(state.registry, newRegistry) ? state.registry : newRegistry;
-    const expandedUiSchema = registry.uiSchemaDefinitions ? (0, import_utils50.expandUiSchemaDefinitions)(rootSchema, uiSchema, registry) : uiSchema;
     const fieldPathId = state.fieldPathId && state.fieldPathId?.[import_utils50.ID_KEY] === registry.globalFormOptions.idPrefix ? state.fieldPathId : (0, import_utils50.toFieldPathId)("", registry.globalFormOptions);
     const nextState = {
       schemaUtils,
       schema: rootSchema,
-      uiSchema: expandedUiSchema,
+      uiSchema,
       fieldPathId,
       formData,
       edit,
@@ -4538,7 +4561,7 @@ var Form = class extends import_react21.Component {
     this._isProcessingUserChange = true;
     const { newValue, path, id } = this.pendingChanges[0];
     const { newErrorSchema } = this.pendingChanges[0];
-    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange } = this.props;
+    const { extraErrors, omitExtraData, liveOmit, noValidate, liveValidate, onChange, removeEmptyOptionalObjects } = this.props;
     const { formData: oldFormData, schemaUtils, schema, fieldPathId, schemaValidationErrorSchema, errors } = this.state;
     let { customErrors, errorSchema: originalErrorSchema } = this.state;
     const rootPathId = fieldPathId.path[0] || "";
@@ -4567,6 +4590,18 @@ var Form = class extends import_react21.Component {
         formData: newFormData
       };
     }
+    if (removeEmptyOptionalObjects) {
+      newFormData = (0, import_utils50.removeOptionalEmptyObjects)(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+      state = {
+        ...state,
+        formData: newFormData
+      };
+    }
     if (newErrorSchema) {
       const oldValidationError = !isRootPath ? (0, import_get5.default)(schemaValidationErrorSchema, path) : schemaValidationErrorSchema;
       if (!(0, import_isEmpty4.default)(oldValidationError)) {
@@ -4667,24 +4702,33 @@ var Form = class extends import_react21.Component {
    * @param data - The data associated with the field that was blurred
    */
   onBlur = (id, data) => {
-    const { onBlur, omitExtraData, liveOmit, liveValidate } = this.props;
+    const { onBlur, omitExtraData, liveOmit, liveValidate, removeEmptyOptionalObjects } = this.props;
     if (onBlur) {
       onBlur(id, data);
     }
     if (omitExtraData === true && liveOmit === "onBlur" || liveValidate === "onBlur") {
       const { onChange, extraErrors } = this.props;
-      const { formData } = this.state;
+      const { formData, schemaUtils, schema } = this.state;
       let newFormData = formData;
       let state = { formData: newFormData };
       if (omitExtraData === true && liveOmit === "onBlur") {
         newFormData = this.omitExtraData(formData);
         state = { formData: newFormData };
       }
+      if (removeEmptyOptionalObjects) {
+        newFormData = (0, import_utils50.removeOptionalEmptyObjects)(
+          schemaUtils.getValidator(),
+          schema,
+          schemaUtils.getRootSchema(),
+          newFormData
+        );
+        state = { ...state, formData: newFormData };
+      }
       if (liveValidate === "onBlur") {
-        const { schema, schemaUtils, errorSchema, customErrors, retrievedSchema } = this.state;
+        const { schema: schema2, schemaUtils: schemaUtils2, errorSchema, customErrors, retrievedSchema } = this.state;
         const liveValidation = this.liveValidate(
-          schema,
-          schemaUtils,
+          schema2,
+          schemaUtils2,
           errorSchema,
           newFormData,
           extraErrors,
@@ -4731,11 +4775,20 @@ var Form = class extends import_react21.Component {
       return;
     }
     event.persist();
-    const { omitExtraData, extraErrors, noValidate, onSubmit } = this.props;
+    const { omitExtraData, extraErrors, noValidate, onSubmit, removeEmptyOptionalObjects } = this.props;
     let { formData: newFormData } = this.state;
     if (omitExtraData === true) {
       newFormData = this.omitExtraData(newFormData);
     }
+    if (removeEmptyOptionalObjects) {
+      const { schemaUtils, schema } = this.state;
+      newFormData = (0, import_utils50.removeOptionalEmptyObjects)(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+    }
     if (noValidate || this.validateFormWithFormData(newFormData)) {
       const errorSchema = extraErrors || {};
       const errors = extraErrors ? (0, import_utils50.toErrorList)(extraErrors) : [];
@@ -4832,7 +4885,7 @@ var Form = class extends import_react21.Component {
     const elementId = path.join(idSeparator);
     let field = this.formElement.current.elements[elementId];
     if (!field) {
-      field = this.formElement.current.querySelector(`input[id^="${elementId}"`);
+      field = this.formElement.current.querySelector(`input[id^="${elementId}"], button[id^="${elementId}"]`);
     }
     if (field && field.length) {
       field = field[0];
@@ -4900,11 +4953,20 @@ var Form = class extends import_react21.Component {
    * @returns - True if the form is valid, false otherwise.
    */
   validateForm() {
-    const { omitExtraData } = this.props;
+    const { omitExtraData, removeEmptyOptionalObjects } = this.props;
     let { formData: newFormData } = this.state;
     if (omitExtraData === true) {
       newFormData = this.omitExtraData(newFormData);
     }
+    if (removeEmptyOptionalObjects) {
+      const { schemaUtils, schema } = this.state;
+      newFormData = (0, import_utils50.removeOptionalEmptyObjects)(
+        schemaUtils.getValidator(),
+        schema,
+        schemaUtils.getRootSchema(),
+        newFormData
+      );
+    }
     return this.validateFormWithFormData(newFormData);
   }
   /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if