Bug: The oneOf selector can be modified in readonly mode (#4463)

* Fixed issue with oneOf selector can be modified in readonly mode

* update based on feedback

Author: abdalla-rko

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)
 - Fixed issue with fields inside an array can't be set to empty when a default is set, fixing [#4456](https://github.com/rjsf-team/react-jsonschema-form/issues/4456)
 - Fixed issue with file accept attribute, fixing [#4404](https://github.com/rjsf-team/react-jsonschema-form/issues/4404).
 

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

@@ -149,6 +149,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
       formContext,
       onBlur,
       onFocus,
+      readonly,
       registry,
       schema,
       uiSchema,
@@ -237,6 +238,7 @@ class AnyOfField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends For
             autofocus={autofocus}
             label={title ?? name}
             hideLabel={!displayLabel}
+            readonly={readonly}
           />
         </div>
         {optionSchema && <_SchemaField {...this.props} schema={optionSchema} uiSchema={optionUiSchema} />}

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