fix(core): field ui-options higher priority (rjsf-team#4212)

* fix(core): field ui-options higher priority

* docs(root): changelog

* Update CHANGELOG.md

---------

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

CHANGELOG.md

@@ -34,6 +34,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Fix case where NumberField would not properly reset the field when using programmatic form reset (#4202)[https://github.com/rjsf-team/react-jsonschema-form/issues/4202]
 - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
+- Fix field disable or readonly property can't cover globalOptions corresponding property (#4212)[https://github.com/rjsf-team/react-jsonschema-form/pull/4212]
 
 ## @rfsf/fluent-ui
 
@@ -55,7 +56,6 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Updated widgets to handle undefined `target` in `onFocus` and `onBlur` handlers
 
-
 ## @rjsf/validator-ajv6
 
 - Improved performance issues with large schema dependencies and oneOf conditions [#4203](https://github.com/rjsf-team/react-jsonschema-form/issues/4203).
@@ -95,6 +95,7 @@ should change the heading of the (upcoming) version to include a major version b
 # 5.18.0
 
 ## @rjsf/antd
+
 - Fix issue where the theme provided by the ConfigProvider under antd v5 wasn't respected thereby rendering the form items unusable under dark themes [#4129](https://github.com/rjsf-team/react-jsonschema-form/issues/4129)
 
 ## @rjsf/core
@@ -133,7 +134,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## Dev / docs / playground
 
-- [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080) - Moved the `base64` encoder/decoder object to the Playground package. 
+- [#4080](https://github.com/rjsf-team/react-jsonschema-form/issues/4080) - Moved the `base64` encoder/decoder object to the Playground package.
 - Added test configuration and script to the Playground.
 
 # 5.17.0

packages/core/src/components/Form.tsx

@@ -877,8 +877,8 @@ export default class Form<
       acceptcharset,
       acceptCharset,
       noHtml5Validate = false,
-      disabled = false,
-      readonly = false,
+      disabled,
+      readonly,
       formContext,
       showErrorList = 'top',
       _internalFormWrapper,

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

@@ -236,8 +236,8 @@ class ObjectField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends Fo
       idSchema,
       name,
       required = false,
-      disabled = false,
-      readonly = false,
+      disabled,
+      readonly,
       hideError,
       idPrefix,
       idSeparator,

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

@@ -150,12 +150,12 @@ function SchemaFieldRender<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
   );
 
   const FieldComponent = getFieldComponent<T, S, F>(schema, uiOptions, idSchema, registry);
-  const disabled = Boolean(props.disabled || uiOptions.disabled);
-  const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
+  const disabled = Boolean(uiOptions.disabled ?? props.disabled);
+  const readonly = Boolean(uiOptions.readonly ?? props.readonly ?? props.schema.readOnly ?? schema.readOnly);
   const uiSchemaHideError = uiOptions.hideError;
   // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
   const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
-  const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
+  const autofocus = Boolean(uiOptions.autofocus ?? props.autofocus);
   if (Object.keys(schema).length === 0) {
     return null;
   }

packages/core/test/uiSchema.test.jsx

@@ -2505,9 +2505,7 @@ describe('uiSchema', () => {
       });
 
       describe('ObjectField', () => {
-        let node;
-
-        beforeEach(() => {
+        it('should mark as readonly an ObjectField', () => {
           const schema = {
             type: 'object',
             properties: {
@@ -2523,13 +2521,41 @@ describe('uiSchema', () => {
           const uiSchema = {};
 
           let rendered = createFormComponent({ schema, uiSchema });
-          node = rendered.node;
-        });
+          const node = rendered.node;
 
-        it('should mark as readonly an ObjectField', () => {
           const disabled = [].map.call(node.querySelectorAll('[type=text]'), (node) => node.hasAttribute('readonly'));
           expect(disabled).eql([true, true]);
         });
+
+        it('should not mark as readonly even if globalOptions set readonly', () => {
+          const schema = {
+            type: 'object',
+            properties: {
+              foo: {
+                type: 'string',
+              },
+              bar: {
+                type: 'string',
+              },
+            },
+            readOnly: true,
+          };
+
+          const uiSchema = {
+            'ui:globalOptions': {
+              readonly: true,
+            },
+            foo: {
+              'ui:readonly': false,
+            },
+          };
+
+          let rendered = createFormComponent({ schema, uiSchema });
+          const node = rendered.node;
+
+          const disabled = [].map.call(node.querySelectorAll('[type=text]'), (node) => node.hasAttribute('readonly'));
+          expect(disabled).eql([false, true]);
+        });
       });
     });
 

packages/utils/src/types.ts

@@ -380,11 +380,11 @@ export interface FieldProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F
   /** A boolean value stating if the field should autofocus */
   autofocus?: boolean;
   /** A boolean value stating if the field is disabled */
-  disabled: boolean;
+  disabled?: boolean;
   /** A boolean value stating if the field is hiding its errors */
   hideError?: boolean;
   /** A boolean value stating if the field is read-only */
-  readonly: boolean;
+  readonly?: boolean;
   /** The required status of this field */
   required?: boolean;
   /** The unique name of the field, usually derived from the name of the property in the JSONSchema */
@@ -545,7 +545,7 @@ export type ArrayFieldTemplateItemType<
   /** The className string */
   className: string;
   /** A boolean value stating if the array item is disabled */
-  disabled: boolean;
+  disabled?: boolean;
   /** A boolean value stating whether new items can be added to the array */
   canAdd: boolean;
   /** A boolean value stating whether the array item can be copied, assumed false if missing */
@@ -571,7 +571,7 @@ export type ArrayFieldTemplateItemType<
   /** Returns a function that swaps the items at `index` with `newIndex` */
   onReorderClick: (index: number, newIndex: number) => (event?: any) => void;
   /** A boolean value stating if the array item is read-only */
-  readonly: boolean;
+  readonly?: boolean;
   /** A stable, unique key for the array item */
   key: string;
   /** The schema object for this array item */
@@ -631,9 +631,9 @@ export type ObjectFieldTemplatePropertyType = {
   /** A string representing the property name */
   name: string;
   /** A boolean value stating if the object property is disabled */
-  disabled: boolean;
+  disabled?: boolean;
   /** A boolean value stating if the property is read-only */
-  readonly: boolean;
+  readonly?: boolean;
   /** A boolean value stating if the property should be hidden */
   hidden: boolean;
 };