Skip to content

Commit 31f08be

Browse files
Fix bug in LayoutGridField related to global options in the uiSchema (#4628)
* Fix bug in LayoutGridField related to global options in the uiSchema Fixes a bug in `LayoutGridField` where it was looking at the wrong key for the `UiSchema`'s global options - Updated `LayoutGridField` to use the `UI_GLOBAL_OPTIONS_KEY` constant from `@rjsf/util` instead of its own constant, which had the wrong key name - Also fixed the `GlobalUISchemaOptions` to extend from `GenericObjectType` to support user-defined values for their customizations - Updated the tests and `CHANGELOG.md` accordingly * Update CHANGELOG.md Co-authored-by: Serena Chen <[email protected]> --------- Co-authored-by: Serena Chen <[email protected]>
1 parent 06e85ca commit 31f08be

File tree

4 files changed

+19
-16
lines changed

4 files changed

+19
-16
lines changed

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,15 @@ should change the heading of the (upcoming) version to include a major version b
2323
- Added `getChakra` to package exports
2424
- Restored the `ui:options` customization
2525

26+
## @rjsf/core
27+
28+
- Updated `LayoutGridField` to use the pre-existing `UI_GLOBAL_OPTIONS_KEY` instead of its own incorrect one.
29+
2630
## @rjsf/util
2731

2832
- Fixed form data propagation with `patternProperties` [#4617](https://github.com/rjsf-team/react-jsonschema-form/pull/4617)
2933
- Fixed issue where oneOf schema references could not be modified when defaults were set, fixing [#4580](https://github.com/rjsf-team/react-jsonschema-form/issues/4580).
34+
- Updated the `GlobalUISchemaOptions` types to extend `GenericObjectType` to support user-defined values for their extensions
3035

3136
## Dev / docs / playground
3237

packages/core/src/components/fields/LayoutGridField.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
SchemaUtilsType,
2323
StrictRJSFSchema,
2424
UI_OPTIONS_KEY,
25+
UI_GLOBAL_OPTIONS_KEY,
2526
UiSchema,
2627
} from '@rjsf/utils';
2728
import cloneDeep from 'lodash/cloneDeep';
@@ -101,10 +102,6 @@ export const LAYOUT_GRID_UI_OPTION = 'layoutGrid';
101102
*/
102103
export const LAYOUT_GRID_OPTION = `ui:${LAYOUT_GRID_UI_OPTION}`;
103104

104-
/** The constant representing the global UI Options object potentially contained within the `uiSchema`
105-
*/
106-
export const UI_GLOBAL_OPTIONS = 'ui:global_options';
107-
108105
/** Type used to return options list and whether it has a discriminator */
109106
type OneOfOptionsInfoType<S extends StrictRJSFSchema = RJSFSchema> = { options: S[]; hasDiscriminator: boolean };
110107

@@ -386,7 +383,7 @@ export default class LayoutGridField<
386383
schemaReadonly?: boolean,
387384
forceReadonly?: boolean,
388385
) {
389-
const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS], {});
386+
const globalUiOptions = get(uiSchema, [UI_GLOBAL_OPTIONS_KEY], {});
390387
const localUiSchema = get(uiSchema, field);
391388
const localUiOptions = { ...get(localUiSchema, [UI_OPTIONS_KEY], {}), ...uiProps, ...globalUiOptions };
392389
const fieldUiSchema = { ...localUiSchema };
@@ -395,7 +392,7 @@ export default class LayoutGridField<
395392
}
396393
if (!isEmpty(globalUiOptions)) {
397394
// pass the global uiOptions down to the field uiSchema so that they can be applied to all nested fields
398-
set(fieldUiSchema, [UI_GLOBAL_OPTIONS], globalUiOptions);
395+
set(fieldUiSchema, [UI_GLOBAL_OPTIONS_KEY], globalUiOptions);
399396
}
400397
let { readonly: uiReadonly } = getUiOptions<T, S, F>(fieldUiSchema);
401398
if (forceReadonly === true || (isUndefined(uiReadonly) && schemaReadonly === true)) {

packages/core/test/LayoutGridField.test.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
sortedJSONStringify,
1818
toIdSchema,
1919
UI_OPTIONS_KEY,
20+
UI_GLOBAL_OPTIONS_KEY,
2021
UiSchema,
2122
} from '@rjsf/utils';
2223
import validator from '@rjsf/validator-ajv8';
@@ -29,7 +30,6 @@ import LayoutGridField, {
2930
LAYOUT_GRID_OPTION,
3031
LayoutGridFieldProps,
3132
Operators,
32-
UI_GLOBAL_OPTIONS,
3333
} from '../src/components/fields/LayoutGridField';
3434
import { SAMPLE_SCHEMA, sampleUISchema, SIMPLE_ONEOF, SIMPLE_ONEOF_OPTIONS } from './testData/layoutData';
3535
import getTestRegistry from './testData/getTestRegistry';
@@ -590,7 +590,7 @@ function FakeSchemaField({ 'data-testid': testId, ...props }: Readonly<FieldProp
590590
const { idSchema, formData, onChange, onBlur, onFocus, uiSchema } = props;
591591
const { [ID_KEY]: id } = idSchema;
592592
// Special test case that will pass an error schema into on change to allow coverage
593-
const error = has(uiSchema, UI_GLOBAL_OPTIONS) ? EXTRA_ERROR : undefined;
593+
const error = has(uiSchema, UI_GLOBAL_OPTIONS_KEY) ? EXTRA_ERROR : undefined;
594594
const onTextChange = ({ target: { value: val } }: ChangeEvent<HTMLInputElement>) => {
595595
onChange(val, error, id);
596596
};
@@ -693,7 +693,7 @@ function getExpectedPropsForField(
693693
const idSchema = get(props.idSchema, field)!;
694694
const formData = get(props.formData, field);
695695
// Also extract any global props
696-
const global = get(props.uiSchema, [UI_GLOBAL_OPTIONS]);
696+
const global = get(props.uiSchema, [UI_GLOBAL_OPTIONS_KEY]);
697697
const fieldUISchema = get(props.uiSchema, field);
698698
const { readonly: uiReadonly } = getUiOptions(fieldUISchema);
699699
// The expected props are the FORWARDED_PROPS, the field name, sub-schema, sub-uiSchema and sub-idSchema
@@ -709,7 +709,7 @@ function getExpectedPropsForField(
709709
uiSchema: {
710710
...uiSchema,
711711
[UI_OPTIONS_KEY]: { ...global, ...otherUiProps }, // spread the global and other ui keys into the ui:options
712-
...(global ? { [UI_GLOBAL_OPTIONS]: global } : {}), // ensure the globals are maintained
712+
...(global ? { [UI_GLOBAL_OPTIONS_KEY]: global } : {}), // ensure the globals are maintained
713713
},
714714
idSchema,
715715
errorSchema,
@@ -1208,12 +1208,12 @@ describe('LayoutGridField', () => {
12081208
test('field with uiProps and uiSchema with global options for the field', () => {
12091209
const uiProps = { fullWidth: true };
12101210
const globalOptions = { label: false };
1211-
const uiSchema = { foo: { 'ui:widget': 'bar' }, [UI_GLOBAL_OPTIONS]: globalOptions };
1211+
const uiSchema = { foo: { 'ui:widget': 'bar' }, [UI_GLOBAL_OPTIONS_KEY]: globalOptions };
12121212
expect(LayoutGridField.computeFieldUiSchema('foo', uiProps, uiSchema)).toEqual({
12131213
fieldUiSchema: {
12141214
...uiSchema.foo,
12151215
[UI_OPTIONS_KEY]: { ...uiProps, ...globalOptions },
1216-
[UI_GLOBAL_OPTIONS]: globalOptions,
1216+
[UI_GLOBAL_OPTIONS_KEY]: globalOptions,
12171217
},
12181218
uiReadonly: undefined,
12191219
});
@@ -1386,7 +1386,7 @@ describe('LayoutGridField', () => {
13861386
const otherUIProps = { inline: true };
13871387
const props = getProps({
13881388
schema: GRID_FORM_SCHEMA,
1389-
uiSchema: { ...gridFormUISchema, [UI_GLOBAL_OPTIONS]: globalUiOptions },
1389+
uiSchema: { ...gridFormUISchema, [UI_GLOBAL_OPTIONS_KEY]: globalUiOptions },
13901390
formData: {},
13911391
errorSchema: { employment: {} },
13921392
// IdSchema is weirdly recursive and it's easier to just ignore the error
@@ -1513,7 +1513,7 @@ describe('LayoutGridField', () => {
15131513
const gridProps = { operator: Operators.NONE, field: fieldName, value: null };
15141514
const props = getProps({
15151515
schema: SAMPLE_SCHEMA,
1516-
uiSchema: { ...sampleUISchema, [UI_GLOBAL_OPTIONS]: { always: 'there' } },
1516+
uiSchema: { ...sampleUISchema, [UI_GLOBAL_OPTIONS_KEY]: { always: 'there' } },
15171517
formData: { [fieldName]: 'foo' },
15181518
layoutGridSchema: { [GridType.CONDITION]: { ...gridProps, children: GRID_CHILDREN } },
15191519
registry: sampleSchemaRegistry,

packages/utils/src/types.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,9 +370,10 @@ export type TemplatesType<T = any, S extends StrictRJSFSchema = RJSFSchema, F ex
370370
};
371371

372372
/** The set of UiSchema options that can be set globally and used as fallbacks at an individual template, field or
373-
* widget level when no field-level value of the option is provided.
373+
* widget level when no field-level value of the option is provided. Extends GenericObjectType to support allowing users
374+
* to provide any value they need for their customizations.
374375
*/
375-
export type GlobalUISchemaOptions = {
376+
export type GlobalUISchemaOptions = GenericObjectType & {
376377
/** Flag, if set to `false`, new items cannot be added to array fields, unless overridden (defaults to true) */
377378
addable?: boolean;
378379
/** Flag, if set to `true`, array items can be copied (defaults to false) */

0 commit comments

Comments
 (0)