Fixed issue with oneOf selector can be modified in readonly mode

rjsf-team · Jan 23, 2025 · 980bc39 · 980bc39
1 parent 2b5c907
commit 980bc39
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/utils
 
 - switch `lodash.isEqualWith` to `fast-equals.createCustomEqual` providing `areFunctionsEqual` assuming any functions are equal.
+- Fixed issue with oneOf selector can be modified in readonly mode, fixing [#4460](https://github.com/rjsf-team/react-jsonschema-form/issues/4460)
 
 # 5.24.1
 

diff --git a/packages/core/src/components/fields/MultiSchemaField.tsx b/packages/core/src/components/fields/MultiSchemaField.tsx
@@ -237,6 +237,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
             autofocus={autofocus}
             label={title ?? name}
             hideLabel={!displayLabel}
+            readonly={this.props.readonly}
           />
         </div>
         {optionSchema && <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />}

diff --git a/packages/core/test/oneOf.test.jsx b/packages/core/test/oneOf.test.jsx
@@ -891,6 +891,80 @@ describe('oneOf', () => {
     });
   });
 
+  it('should select oneOf dropdown be disabled when the schema is readOnly', () => {
+    const schema = {
+      title: 'Example Schema',
+      type: 'object',
+      readOnly: true,
+      properties: {
+        contactPreference: {
+          oneOf: [
+            {
+              $ref: '#/definitions/phoneContact',
+            },
+            {
+              $ref: '#/definitions/emailContact',
+            },
+          ],
+        },
+      },
+      required: ['contactPreference'],
+      definitions: {
+        phoneContact: {
+          type: 'object',
+          properties: {
+            contactMethod: {
+              type: 'string',
+              enum: ['phone'],
+            },
+            phoneNumber: {
+              type: 'string',
+              pattern: '^[0-9]{10}$',
+            },
+          },
+          required: ['contactMethod', 'phoneNumber'],
+        },
+        emailContact: {
+          type: 'object',
+          properties: {
+            contactMethod: {
+              type: 'string',
+              enum: ['email'],
+            },
+            emailAddress: {
+              type: 'string',
+              format: 'email',
+            },
+          },
+          required: ['contactMethod', 'emailAddress'],
+        },
+      },
+    };
+
+    const { node } = createFormComponent({
+      schema,
+      formData: {
+        contactPreference: {
+          contactMethod: 'phone',
+          phoneNumber: '1231231231',
+        },
+      },
+    });
+
+    const $select = node.querySelector('select#root_contactPreference__oneof_select');
+
+    expect($select.value).eql('0');
+    expect($select).to.have.property('disabled', true);
+
+    act(() => {
+      fireEvent.change($select, {
+        target: { value: $select.options[1].value },
+      });
+    });
+
+    expect($select.value).eql('0');
+  });
+
   describe('Arrays', () => {
     it('should correctly render mixed types for oneOf inside array items', () => {
       const schema = {