I am attempting to complete several AJAX commands based on the value of a field in a node/add form. The commands themselves work. However,when a user is filling out the form the cursor (focus) keeps going back to the field that has the callback when another field is clicked regardless of the value of the field.
In this given case we are trying to see if someone is 64.5 years old and change the form accordingly.
I start with a form alter to add the callback.
$form['field_birthdate']['widget'][0]['value']['#prefix'] = '<div id="field-birthdate-custom-wrapper">';
$form['field_birthdate']['widget'][0]['value']['#suffix'] = '</div>';
$form['field_birthdate']['widget'][0]['value']['#ajax'] = [
'callback' => '_custom_age_check_pop_up',
'disable-refocus' => FALSE,
'event' => 'focusout',
'wrapper' => 'field-birthdate-custom-wrapper',
];
I then have my callback function. I am only including the AJAX related code.
function _custom_age_check_pop_up(&$form, FormStateInterface $form_state) {
$response = new AjaxResponse();
if ($age_months <= 774 && $popup_count == 1) {
$response->addCommand(new InvokeCommand('#edit-field-is-64-point-5-plus', 'val', ['No']));
$response->addCommand(new InvokeCommand('#edit-field-street-address-0-value','attr',['disabled', true]));
$response->addCommand(new OpenModalDialogCommand($title,
$dialogText, ['width' => '600']));
} elseif ($age_months >= 775) {
$response->addCommand(new InvokeCommand('#edit-field-is-64-point-5-plus', 'val', ['Yes']));
$response->addCommand(new InvokeCommand('#edit-field-street-address-0-value','attr',['disabled', false]));
}
return $response;
}
I can click around enough to see that the code is working. The problem is wherever I click the cursor goes back to the date field that triggered the original call back.
Any help is greatly appreciated.
Thanks!