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 <51679588+heath-freenome@users.noreply.github.com>

---------

Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>

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)) {