Client Scripts, Popup with Datatable issue on value change

Hi!

I’m having an issue on a client script. Backstory: When the user submits a document, a custom button will appear to allow the user to take the information of the submitted document and generate another document (different DOCTYPE) that will be linked to this document. So basically the current document is submitted, I need to show the user a popup with a table having information of a child table called “variants.”

The user should be able change some values (not to change the submited values, but the changed values will go into the new doctype. This is my code:

        cur_frm.add_custom_button(__("Production Order"), function() {
            const dialog = new frappe.ui.Dialog({
                title: __('Production Order'),
                fields: [
                    {
                        label: __('Track'),
                        fieldname: 'name',
                        fieldtype: 'Data',
                        default: "IND-IQI",
                        description: 'Select a name that reflects the way the items will be produced.'
                    }, 
                    {
                        label: __('Variant'),
                        fieldtype:'Section Break'
                    }, 
                    {
                        fieldname: "variants",
                        fieldtype: "Table", 
                        cannot_add_rows: true,
                        in_place_edit: false, 
                        data: frm.doc.variants,
                        fields: [
                            {
                                fieldtype:'Link',
                                fieldname:"variant",
                                options: 'Variant',
                                in_list_view: 1,
                                read_only: 1,
                                label: __('Variant')
                            }, 
                            {
                                fieldtype:'Int',
                                fieldname:"quantity",
                                in_list_view: 1,
                                label: __('Quantity')
                            },
                        ]
                    },
                ],
                primary_action_label: __('Create') + " " + __('Production Order'),
                primary_action(values) {
                    make_order(frm, values);
    
                    this.hide();
                    frappe.set_route("List", "Production Order", {"tech_pack": frm.doc.name});
                },
            });
            dialog.show();
        });

PROBLEM: Every time the user clicks on the quantity value, the information disapears and doesn’t allow change. If I look into inspect, I can still see the original value there.

Here is how the popup look before i click it:

And this is how the popup look like after I click it.

Again, the information is still there in html. But I am unable to edit the quantity value.