Unable to Capture Selected Value in Link Field within Dialog using onchange Event in Frappe

[husamhammad]

Bug Description

When using a Link field in a dialog in Frappe, the onchange event does not capture the selected value as expected. This issue prevents dynamic handling of user selections within dialogs, as the value either remains inaccessible or the event object is null.

About Us

We are Rukn Software, a software development company dedicated to building robust, user-friendly applications with a focus on efficiency and quality. We regularly contribute to open-source projects and rely on frameworks like Frappe to deliver high-quality solutions to our clients. As active users and contributors to the Frappe community, we believe that addressing this issue will enhance the framework's capabilities, especially in creating more dynamic and responsive user interfaces.

Steps to Reproduce

1. Create a custom dialog in Frappe with a Link field.
2. Attempt to capture the value of the Link field when a selection is made using the onchange event into table dialog.
3. Notice that the value is not captured, and the event object is either null or does not contain the selected value.

Expected Behavior The selected value of the Link field should be accessible within the onchange event or through the standard Frappe methods like this.value.

Actual Behavior The value of the Link field is not accessible when the onchange event is triggered. This limits the ability to dynamically respond to user selections in a dialog.

Code Example Here’s a simplified code snippet that demonstrates the issue:

const dialog = new frappe.ui.Dialog({
    title: 'Select Item',
    fields: [
        {
            fieldname: 'items',
            fieldtype: 'Table',
            label: 'Items',
            cannot_add_rows: true,
            cannot_delete_rows: true,
            fields: [
                {
                    fieldname: 'item_code',
                    fieldtype: 'Link',
                    label: 'Item Code',
                    options: 'Item',
                    in_list_view: 1,
                    onchange: function () {
                        const itemCode = this.value
                        console.log('Item Code selected:', itemCode);
                    }
                }
            ],
            data: [{}],
            get_data: () => [{}] 
        }
    ]
});

dialog.show();

Additional information

OS version / distribution: (Ubuntu 22.04)
Frappe install method: (e.g., Easy Install, Manual Install, Docker, etc.)
Browser: (Firefox)

[kunhimohamed]

did you try this.value? const itemCode = this.value;

[husamhammad]

const itemCode = this.value;

yes i try it and it give me an error on the console like this : Uncaught (in promise) TypeError: this is undefined

[kunhimohamed]

which version you are using? it works for me version 15.

[husamhammad]

which version you are using? it works for me version 15.

version 14

[kunhimohamed]

Tested version 14, it works. Frappe Framework (v14.80.0) ERPNext (v14.72.2)

[husamhammad]

ok like this it work but try to make it into table dialog not work for example make an table with link field you will found that the this is undefined

[kunhimohamed]

Then please update the Issue.

On Sun, 1 Sept 2024, 11:42 Husam Hammad, @.***> wrote:

ok like this it work but try to make it into table dialog not work for example make an table with link field you will found that the this is undefined

— Reply to this email directly, view it on GitHub https://github.com/frappe/frappe/issues/27554#issuecomment-2323214531, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADDX6NISUJNS6VOWK4YLMEDZULAPXAVCNFSM6AAAAABNIGUHHGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRTGIYTINJTGE . You are receiving this because you commented.Message ID: @.***>

[husamhammad]

I updated it