Field is still saved even though it is set to read-only

[CherryDT]

Link to reproduction

No response

Describe the Bug

I've set a field (a transaction status) to read-only so that it is visible in the admin but the user can't change it through normal means (because it would cause a problem with the user opening the form to change something else, the system updating the status elsewhere in the meantime and then the user saving the form and inadvertedly resetting the transaction status back to what it was before).

However, I noticed it's still sent in the form payload and overwrites the data in the database when saved. I don't see why it would need to be sent here, if it's not meant to be changed anyway.

(Yes, I could use access to prevent writing to it, but that's not good either because other parts of the system may want to write to this field through the API, in a controlled manner, but also with the user's credentials.)

To Reproduce

Set a field to read-only.
Open the edit form.
Change the field through API or directly in the DB.
Submit the edit form.
Note that the value was reset to what it was when the edit form was opened.

Payload Version

2.12.1

Adapters and Plugins

db-mongodb, bundler-webpack

[jmikrut]

Hey @CherryDT — there are a few complexities with this that make it somewhat difficult to accomplish what you're looking for without some side-effects.

Marking a field as readOnly indeed keeps the field in the form state so that you can access / manipulate it. It also means that when you run functions like form.getData(), that field will indeed be included in the data from the form. But you're right, the field's data will indeed be sent through the REST request for create / update.

There are some alternatives, though. You can use admin.disabled: true to completely disable the field, which will then completely hide the field from the admin UI. You could then use a custom UI component to show the field's value in a read-only fashion.

Alternatively, you could add a beforeValidate hook that simply takes the field's originalDoc value and returns that, omitting whatever was passed from the API, and reverting back to the value you want.

We might be able to solve for this at some point in the near-future, but it likely will be against 3.0. I will mark this as a Feature Request for now and we will keep an eye on interest for this topic. If more people show interest, we will prioritize a way to make this happen!

[CherryDT]

Thanks for the ideas. However the beforeValidate hook would, if I understand correctly, also prevent the REST API from writing the field, is that correct?

What I wanted to achieve is that a field is shown in the admin but not editable (but editable via API where a more "granular" update is possible) to avoid editing conflicts from unrelated fields.

[kaunas163]

Hello. I had same issue and tried going "admin.disabled" and "custom ui field" route. But I have absolutely no success in this. I disabled the fields from admin, they don't show anymore, etc. But in custom ui field I can't get their information, because it's not passed anymore, I tried all the ways I can think off, but no success. I even tried getting id and using local api to get data, but then I can't get around async await things because then field component gets invalid for some reason. Please advice.

For example, my disabled field:

   {
            name: 'inventory',
            label: 'Kiekis sandėlyje (leidžiamas pirkimams)',
            type: 'number',
            admin: {
                disabled: true,
            },
        },

I tried creating custom ui field:

 {
            name: 'inventory-info',
            label: 'Prekės likučiai',
            type: 'ui',
            admin: {
                components: {
                    Field: ProductVariantInventoryInfo,
                },
                position: 'sidebar',
            },
        },

It's code after a lot tries:

import payload from 'payload'
import { useAllFormFields, useForm } from 'payload/components/forms'
import { useDocumentInfo } from 'payload/dist/admin/components/utilities/DocumentInfo'
import React from 'react'

const ProductVariantInventoryInfo: React.FC = () => {
    // const [fields, dispatchFields] = useAllFormFields()
    // console.log(fields)

    // return (
    //     <>
    //         <p>Likučiai sandėlyje</p>
    //         <p>Likutis pardavimui: {fields.inventory}</p>
    //     </>
    // )

    // const data = useForm()
    // console.log(data.getData())

    const { id } = useDocumentInfo()
    console.log(id)

    payload.find({
        collection: 'products-variants',
        where: { id: { equals: id } },
    }).then(variant => {
        console.log(variant)

        return <p>likuciai</p>
    })

    return <p>Kraunasi</p>
}

export default ProductVariantInventoryInfo