fix typos in constants.ts, Form.tsx (#4185)

* fix typos in constants.ts, Form.tsx

* keep the constants to for backwards compatibility

Co-authored-by: Heath C <[email protected]>

---------

Co-authored-by: Heath C <[email protected]>

Author: HanJaeJoon

CHANGELOG.md

@@ -16,6 +16,12 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 5.18.4
+
+## Dev / docs / playground
+
+- Fixed typo in `constants.ts`, `Form.tsx`
+
 # 5.18.3
 
 ## @rjsf/semantic-ui

packages/core/src/components/Form.tsx

@@ -20,7 +20,7 @@ import {
   RegistryWidgetsType,
   RJSFSchema,
   RJSFValidationError,
-  RJSF_ADDITONAL_PROPERTIES_FLAG,
+  RJSF_ADDITIONAL_PROPERTIES_FLAG,
   SchemaUtilsType,
   shouldRender,
   SUBMIT_BTN_OPTIONS_KEY,
@@ -111,8 +111,12 @@ export interface FormProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
    */
   onFocus?: (id: string, data: any) => void;
   // <form /> HTML attributes
-  /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
+  /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form
+   * @deprecated replaced with `acceptCharset` which will supercede this value if both are specified
+   */
   acceptcharset?: string;
+  /** The value of this prop will be passed to the `accept-charset` HTML attribute on the form */
+  acceptCharset?: string;
   /** The value of this prop will be passed to the `action` HTML attribute on the form
    *
    * NOTE: this just renders the `action` attribute in the HTML markup. There is no real network request being sent to
@@ -537,7 +541,7 @@ export default class Form<
         if (typeof _obj[key] === 'object') {
           const newPaths = paths.map((path) => [...path, key]);
           // If an object is marked with additionalProperties, all its keys are valid
-          if (_obj[key][RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
+          if (_obj[key][RJSF_ADDITIONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
             acc.push(_obj[key][NAME_KEY]);
           } else {
             getAllPaths(_obj[key], acc, newPaths);
@@ -871,6 +875,7 @@ export default class Form<
       autoComplete,
       enctype,
       acceptcharset,
+      acceptCharset,
       noHtml5Validate = false,
       disabled = false,
       readonly = false,
@@ -905,7 +910,7 @@ export default class Form<
         action={action}
         autoComplete={autoComplete}
         encType={enctype}
-        acceptCharset={acceptcharset}
+        acceptCharset={acceptCharset || acceptcharset}
         noValidate={noHtml5Validate}
         onSubmit={this.onSubmit}
         as={as}

packages/utils/src/constants.ts

@@ -1,6 +1,6 @@
 /** Below are the list of all the keys into various elements of a RJSFSchema or UiSchema that are used by the various
  * utility functions. In addition to those keys, there are the special `ADDITIONAL_PROPERTY_FLAG` and
- * `RJSF_ADDITONAL_PROPERTIES_FLAG` flags that is added to a schema under certain conditions by the `retrieveSchema()`
+ * `RJSF_ADDITIONAL_PROPERTIES_FLAG` flags that is added to a schema under certain conditions by the `retrieveSchema()`
  * utility.
  */
 export const ADDITIONAL_PROPERTY_FLAG = '__additional_property';
@@ -23,7 +23,11 @@ export const PROPERTIES_KEY = 'properties';
 export const REQUIRED_KEY = 'required';
 export const SUBMIT_BTN_OPTIONS_KEY = 'submitButtonOptions';
 export const REF_KEY = '$ref';
+/**
+ * @deprecated Replace with correctly spelled constant `RJSF_ADDITIONAL_PROPERTIES_FLAG`
+ */
 export const RJSF_ADDITONAL_PROPERTIES_FLAG = '__rjsf_additionalProperties';
+export const RJSF_ADDITIONAL_PROPERTIES_FLAG = '__rjsf_additionalProperties';
 export const ROOT_SCHEMA_PREFIX = '__rjsf_rootSchema';
 export const UI_FIELD_KEY = 'ui:field';
 export const UI_WIDGET_KEY = 'ui:widget';

packages/utils/src/schema/toPathSchema.ts

@@ -12,7 +12,7 @@ import {
   ONE_OF_KEY,
   PROPERTIES_KEY,
   REF_KEY,
-  RJSF_ADDITONAL_PROPERTIES_FLAG,
+  RJSF_ADDITIONAL_PROPERTIES_FLAG,
 } from '../constants';
 import getDiscriminatorFieldFromSchema from '../getDiscriminatorFieldFromSchema';
 import { FormContextType, PathSchema, RJSFSchema, StrictRJSFSchema, ValidatorType } from '../types';
@@ -69,7 +69,7 @@ function toPathSchemaInternal<T = any, S extends StrictRJSFSchema = RJSFSchema,
   }
 
   if (ADDITIONAL_PROPERTIES_KEY in schema && schema[ADDITIONAL_PROPERTIES_KEY] !== false) {
-    set(pathSchema, RJSF_ADDITONAL_PROPERTIES_FLAG, true);
+    set(pathSchema, RJSF_ADDITIONAL_PROPERTIES_FLAG, true);
   }
 
   if (ITEMS_KEY in schema && Array.isArray(formData)) {

packages/validator-ajv8/src/createAjvInstance.ts

@@ -3,7 +3,7 @@ import addFormats, { FormatsPluginOptions } from 'ajv-formats';
 import isObject from 'lodash/isObject';
 
 import { CustomValidatorOptionsType } from './types';
-import { ADDITIONAL_PROPERTY_FLAG, RJSF_ADDITONAL_PROPERTIES_FLAG } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, RJSF_ADDITIONAL_PROPERTIES_FLAG } from '@rjsf/utils';
 
 export const AJV_CONFIG: Options = {
   allErrors: true,
@@ -50,7 +50,7 @@ export default function createAjvInstance(
 
   // Add RJSF-specific additional properties keywords so Ajv doesn't report errors if strict is enabled.
   ajv.addKeyword(ADDITIONAL_PROPERTY_FLAG);
-  ajv.addKeyword(RJSF_ADDITONAL_PROPERTIES_FLAG);
+  ajv.addKeyword(RJSF_ADDITIONAL_PROPERTIES_FLAG);
 
   // add more schemas to validate against
   if (Array.isArray(additionalMetaSchemas)) {