Update a container field with ajax callback breaks checkboxes and radios

I've independently found this problem with a similar problem replacing one set of radio buttons with another. Similarly with checkboxes. It would appear that the '#options' field is being ignored.

There are comments about this in a number of places including here: https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!Element!Ch...

In my case I've got something similar to the following in my ajax callback.

  public function ajaxNewOptions(array &$form, FormStateInterface $form_state) {
    $form['test_selection'] = [
      '#type' => 'radios',
      '#title' => $this->t('Replaced options'),
      '#options' => array('Option 10' => $this->t('Option 10'), 'Option 20' => $this->t('Option 20'), 'Option 30' => $this->t('Option 30')),
      '#prefix' => '<div id="options-replace">',
      '#suffix' => '</div>',
    ];

    $response = new AjaxResponse();
    $response->addCommand(new ReplaceCommand('#options-replace', $form['test_selection']));
    return $response;
  }

The resulting code on the page, with debug twig messages is:

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'fieldset' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/fieldset.html.twig' -->
<fieldset id="--wrapper" class="fieldgroup form-composite js-form-item form-item js-form-wrapper form-wrapper">
      <legend>
        <span class="fieldset-legend">Replaced options</span>
      </legend>
     <div class="fieldset-wrapper">
<!-- THEME DEBUG -->
<!-- THEME HOOK: 'radios' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/radios.html.twig' -->
      <div></div>
 <!-- END OUTPUT from 'core/modules/system/templates/radios.html.twig' -->
      </div>
</fieldset>

<!-- END OUTPUT from 'core/modules/system/templates/fieldset.html.twig' -->

The title makes it through but not the options.

I'm going to look a bit deeper into this but I don't have much time to resolve this issue and might have to use a workaround.

I thought I had found a simple fix for this - but this causes other issues:

You can run the array through the appropriate processor to expand them.
Example:

  public function ajaxNewOptions(array &$form, FormStateInterface $form_state) {
    $form['test_selection'] = [
      '#type' => 'radios',
      '#title' => $this->t('Replaced options'),
      '#options' => array('1' => $this->t('Option 1'), '2' => $this->t('Option 2'), '3' => $this->t('Option 3')),
      '#prefix' => '<div id="options-replace">',
      '#suffix' => '</div>',
    ];
//    Checkboxes::processCheckboxes($form['test_selection'],$form_state,$form);
    Radios::processRadios($form['test_selection'],$form_state,$form);

    $response = new AjaxResponse();
    $response->addCommand(new ReplaceCommand('#options-replace',$form['test_selection']));
    return $response;
  }

with of course, the appropriate use clause:

use Drupal\Core\Render\Element\Checkboxes;
or
use Drupal\Core\Render\Element\Radios;

EDIT: I've just noted that although the options appear, this is creating a number of PHP warnings. I will try to determine what the issues is...

I have same issue in my code:

namespace Drupal\drupal_miseries\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\Checkboxes;

class CheckboxesAjax extends FormBase {

    protected $values = [
        'select' => [
            '1' => 'Value1',
            '2' => 'Value2',
        ],
        'checkboxes' => [
            '1' => 'checkbox1',
            '2' => 'checkbox2',
        ],
    ];

    public function getFormId() {
        return 'drupal_miseries_checkboxesajax';
    }

    public function ajaxCallback(array &$form, FormStateInterface  $form_state) {
        $form['container']['checkboxes'] = [
            '#type' => 'checkboxes',
            '#title' => $this->t('Checkboxes back from ajax call with select = '.
                $form_state->getValue('select')),
            '#options' => $this->values['checkboxes'],
            '#default_value' => ['1'],
        ];

        // Add processCheckboxes to return checkboxes on ajax call
        // but not process #default_value
        Checkboxes::processCheckboxes($form['container']['checkboxes'],
            $form_state, $form);

        return $form['container'];
    }

    public function buildForm(array $form, FormStateInterface $form_state) {
        $form['select'] = [
            '#type' => 'select',
            '#title' => $this->t('Select form control'),
            '#options' => $this->values['select'],
            '#ajax' => [
                'callback' => [$this, 'ajaxCallback'],
                'wrapper' => 'checkboxes_wrapper',
            ],
        ];

        $form['container'] = [
            '#type' => 'container',
            '#attributes' => ['id' => 'checkboxes_wrapper'],
        ];

        $form['container']['checkboxes'] = [
            '#type' => 'checkboxes',
            '#title' => $this->t('Checkboxes form control'),
            '#options' => $this->values['checkboxes'],
            '#default_value' => array('2'),
        ];

        return $form;
    }

    public function submitForm(array &$form, FormStateInterface $form_state) {

    }
}

If i remove line. ' Checkboxes::processCheckboxes($form['container']['checkboxes'], $form_state, $form);' an empty checkboxes control is returned. Even with this line, #default_value array is not processed an is imposible return a checboxes control with default lines checked.

I think drupal have same issue with checkbox, radio or tableselect form control on ajax callback.

I have find a fix for this problem. "Checkboxes::processCheckboxes" generate an array like this that finally will be an array of checkbox:

Array
(
    [#type] => checkboxes
    [#title] => stdClass Object
        (
            [__CLASS__] => Drupal\Core\StringTranslation\TranslatableMarkup
            [string] => Checkboxes back from ajax call with select = 2
            [translatedMarkup] => 
            [options] => Array
                (
                )

            [stringTranslation] => stdClass Object
                (
                    [__CLASS__] => Drupal\Core\StringTranslation\TranslationManager
                    [translators] => Array
                        (
                            [30] => Array
                                (
                                    [0] => stdClass Object
                                        (
                                            [__CLASS__] => Drupal\Core\StringTranslation\Translator\CustomStrings
                                            [settings] => Drupal\Core\Site\Settings
                                            [translations] => Array(0)
                                            [_serviceIds] => Array(0)
                                        )

                                )

                            [0] => Array
                                (
                                    [0] => stdClass Object
                                        (
                                            [__CLASS__] => Drupal\locale\LocaleTranslation
                                            [storage] => Drupal\locale\StringDatabaseStorage
                                            [configFactory] => Drupal\Core\Config\ConfigFactory
                                            [translations] => Array(0)
                                            [cache] => Drupal\Core\Cache\DatabaseBackend
                                            [lock] => Drupal\Core\ProxyClass\Lock\DatabaseLockBackend
                                            [translateEnglish] => 
                                            [languageManager] => Drupal\language\ConfigurableLanguageManager
                                            [requestStack] => Symfony\Component\HttpFoundation\RequestStack
                                        )

                                )

                        )

                    [sortedTranslators] => 
                    [defaultLangcode] => es
                )

            [arguments] => Array
                (
                )

        )

    [#options] => Array
        (
            [1] => checkbox1
            [2] => checkbox2
        )

    [#default_value] => Array
        (
            [0] => 1
        )

    [#tree] => 1
    [1] => Array
        (
            [#type] => checkbox
            [#title] => checkbox1
            [#return_value] => 1
            [#default_value] => 
            [#attributes] => 
            [#ajax] => 
            [#error_no_message] => 1
            [#weight] => 0.001
        )

    [2] => Array
        (
            [#type] => checkbox
            [#title] => checkbox2
            [#return_value] => 2
            [#default_value] => 
            [#attributes] => 
            [#ajax] => 
            [#error_no_message] => 1
            [#weight] => 0.002
        )

)

At the end of this array indivual checkbox have been generated so we can modify this array to add '#checked' property with TRUE value to all checkbox that must be checked by default.

[1] => Array
        (
            [#type] => checkbox
            [#title] => checkbox1
            [#return_value] => 1
            [#default_value] => 
            [#attributes] => 
            [#ajax] => 
            [#error_no_message] => 1
            [#weight] => 0.001
            [#checked] => 1
        )

    [2] => Array
        (
            [#type] => checkbox
            [#title] => checkbox2
            [#return_value] => 2
            [#default_value] => 
            [#attributes] => 
            [#ajax] => 
            [#error_no_message] => 1
            [#weight] => 0.002
            [#checked] => 1
        )

You are abusing the ajax system in a way it was not designed to be used.
The ajax callback is meant to be used to simply return the substructure of the form array you want to use to replace in the rendered HTML.
In your form builder you need to build up the form you want to render later in the ajax callback.
Given that you have to use the $form_state to build the form dynamically, in your example provide the checkboxes you actually need, and then return them out in your ajax callback.

You are right!!!!

- I shouldn't call Checkboxes::processCheckboxes, but is the only way to return checkboxes with value on ajax callback.
- I shouldn't add #checked property, but is the only way to return checkboxes checked by default from ajax callback.

The right code for ajax callback should be:

public function ajaxCallback(array &$form, FormStateInterface  $form_state) {
        
       $form['container']['checkboxes'] = [
            '#type' => 'checkboxes',
            '#title' => $this->t('Checkboxes back from ajax call with select = '.
                $form_state->getValue('select')),
            '#options' => $this->values['checkboxes'],
            '#default_value' => ['1', '2'],
        ];

        return $form['container'];
    }

I think i have solved this issue and dawehner on #11 will be agree with me:

namespace Drupal\drupal_miseries\Form;

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\Checkboxes;

class CheckboxesAjax extends FormBase {

    protected $values = [
        'select' => [
            '1' => 'Value1',
            '2' => 'Value2',
        ],
        'checkboxes' => [
            '1' => 'checkbox1',
            '2' => 'checkbox2',
        ],
    ];

    public function getFormId() {
        return 'drupal_miseries_checkboxesajax';
    }
    
    public function selectAjaxCallback(array &$form, FormStateInterface $form_state) {
      return $form['container'];
    }
    
    public function checkboxesAjaxCallback(array &$form, FormStateInterface $form_state) {
      $checkbox = $form_state->getTriggeringElement();
      $select = $form_state->getValue('select');
      
      $form['status']['mensaje'] = [
          '#markup' => '<p>Select: '.$select.' '.$checkbox['#title'].' clicked.'.'</p>',
      ];
      
      return $form['status'];
    }
    
    public function buildForm(array $form, FormStateInterface $form_state) {
        $form['select'] = [
            '#type' => 'select',
            '#title' => $this->t('Select form control'),
            '#options' => $this->values['select'],
            '#default_value' => key($this->values['select']),
            '#ajax' => [
                'callback' => [$this, 'selectAjaxCallback'],
                'wrapper' => 'checkboxes_wrapper',
            ],
        ];

        $form['container'] = [
            '#type' => 'container',
            '#attributes' => ['id' => 'checkboxes_wrapper'],
        ];
        
        $form['container']['checkboxes'] = [
            '#type' => 'checkboxes',
            '#title' => $this->t('Checkboxes form control from select @select',
              [ '@select' => empty($form_state->getValues()) ? 
                  $this->values['select'][key($this->values['select'])] : $form_state->getValue('select') ]),
            '#options' => $this->values['checkboxes'],
            '#default_value' => array('2'),
            '#ajax' => [
                'callback' => [$this, 'checkboxesAjaxCallback'],
                'wrapper' => 'status',
            ],
        ];
        
        $form['status'] = [
            '#type' => 'container',
            '#attributes' => ['id' => 'status'],
        ];

        return $form;
    }

    public function submitForm(array &$form, FormStateInterface $form_state) {

    }
}

I have included ajax on checkboxes updating a status message.

Enjoy!!!!!

Why does this work properly for a select list but not for checkboxes?

My code works perfecly when I change '#type' => 'checkboxes' to '#type' => 'select' in my ajax callback.
The checkboxes also work fine if I use them in my buildForm()

What I want to do is:
- I have a select list on my form that loads a taxonomy term id
- Based on the id selected, I want to display a field from that taxonomy term as checkboxes on my form
In short: I want to load the '#options' of my checkboxes field in my ajax callback.

I'm getting the following two errors, only when using 'checkboxes' in my ajax callback:
Notice: Undefined index: #title_display in Drupal\Core\Render\Element\Checkboxes::preRenderCompositeFormElement() (line 20 of /app/www/core/lib/Drupal/Core/Render/Element/CompositeFormElementTrait.php)
Notice: Undefined index: #id in Drupal\Core\Render\Element\Checkboxes::preRenderCompositeFormElement() (line 30 of /app/www/core/lib/Drupal/Core/Render/Element/CompositeFormElementTrait.php)

After some further investigation the two errors above don't seem to have to do anything with the actual problem.
Removing the #title field from the checkboxes also removes the notices, but the checkboxes still do not show.

If anyone has some pointers to where I can continue looking, I'd like to fix this issue if possible.

I was running into the same issue, and looking within #9 allows the checkboxes options to be populated.

In my ajax callback:

$new_options = array('new array items that I generated');

$form['wrapper']['dynamic_checkboxes']['#options'] = $new_options;

Checkboxes::processCheckboxes($form['wrapper']['dynamic_checkboxes'],
                $form_state, $form);

return $form['wrapper']['dynamic_checkboxes'];

Does this cover the original issue stated?

#11 is right, you need to build the structure of the form in buildForm.
You can't alter or add new elements in the callback function.
What you need to do is return the wrapper element in the callback and use your business logic in buildForm to alter the Form.

In my form, I needed to change radios' options depending on a different form element (let's call it $form['dep']).
In the callback function I just return $form['wrapper'] and in buildForm I check the value of 'dep' ($form_state->getValue('dep')) and react accordingly in buildForm. If you do this it works with radios too, without processing them in the callback.

Processing in the callback also caused the radio to break for me, it chose the option that was selected before the callback, not the option I chose after the callback.