Field Change Event Called Twice

Frappe Framework
1

When a field changes on my form, I want to confirm with the user that they really want to do that as doing so will result in the child table being cleared. I have it setup as follows but the problem is, the change event for my field is being called twice causing two confirmation dialogs to be displayed one over another.

Here is my code:

// payroll_period is the field being changed, employees is the child table
frappe.ui.form.on( "Bulk Time Card", {
    payroll_period: async ( frm ) => {
        if( frm.doc.payroll_period !== null && frm.doc.payroll_period !== "" ){
            // check if employees in child table - if none, no need to prompt user
            if( frm.doc.employees.length > 0 ){
                let promise = new Promise((resolve, reject) => {
                    frappe.confirm(
                        "<b>Changing the payroll period will reset all entered hours for employees below. Are you sure you wish to continue?</b>",
                        () => {
                            // approve - continue with populating table
                            populate_employee_list( frm );
                        },
                        () => {
                            // reject - reset payroll period back to old value
                            let previous_payroll_period = frm.fields_dict.payroll_period.value;
                            frm.doc.payroll_period = previous_payroll_period;
                            frm.refresh_field( "payroll_period" );
                        }
                    );
                });
                await promise.catch( () => frappe.throw() );
            }else{
                populate_employee_list( frm );
            }
        }
	},
} );

I found a similar discussion around this and the following solution was provided:

But when I implemented it, this didn’t work. Variable is_focused is always being set as false.

Anyone encounter this before and/or have suggestions on how to work around?

2

Hello,

We have also done something like this

should_call() {
    const customer = this.customer.$input;
    if (customer.is(":focus")) {
        customer.blur();
        return false;
    }

    return true;
}
3

Thanks. Your solution, while similar to the other post I had seen, but it solved the problem.