Score:1

Focus Returns to Field With AJAX Callback

gf flag

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!

4uk4 avatar
cn flag
You've already added `disable-refocus` to the #ajax array, but you have to set it to TRUE to be effective. See https://drupal.stackexchange.com/questions/282868/focus-problem-when-ajax-call-for-multiple-fields-calling-the-same-callback-funct
Drupal Learner avatar
gf flag
@4uk4 I sure thought I tried this but it works well. Thanks!
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.