Readonly inside the fields is not working for reference

[srinivasarao549]

Hi,

I have a document with reference to another document, whenever I was using the read-only attribute it's not allow me to select the value.

Here is an example:

import Tabs from 'sanity-plugin-tabs'
import { MdHomeWork } from 'react-icons/md'

export default {
    name: "program",
    type: "document",
    title: "Programs",
    icon: MdHomeWork,
    fields: [
        {
            name: 'details',
            type: 'object',
            inputComponent: Tabs,

            fieldsets: [
                { name: 'setup', title: 'Setup', options: { sortOrder: 10 } },
                { name: 'venue', title: 'Venue', options: { sortOrder: 20 } }
            ],
            options: {
                layout: 'object',
            },
            fields: [
                {
                    name: 'programTitle', 
                    type: 'string', 
                    title: 'Program Title',
                    fieldset: "setup",
                    validation: Rule => Rule.required(),
                },
                {
                    name: 'description',
                    title: 'Program Description',
                    type: 'reference',
                    to: [
                        {
                            type: 'programDescription'
                        }
                    ], 
                    options: {
                        disableNew: true,
                    },
                    fieldset: "setup",
                    validation: Rule => Rule.required(),
                    readOnly: false
                },
            ]
        },
        
    ],
    
}

When I do this, the dropdown is showing the values but when I selected any, it's not set to the field.
If I remove read-only it works fine.