JS #states behavior does not have a detach method

Problem/Motivation

If a field having states is depended on a field loaded in or modified in Ajax, the the states has no effect on the field when the Ajax is loaded.

Steps to reproduce

1. Create with form with Ajax and states as below.

$form['js_states_test'] = [
      '#type' => 'details',
      '#open' => TRUE,
      '#prefix' => '<div id="js_states_test_wrapper">',
      '#suffix' => '</div>',
    ];
    $form['js_states_test']['reload'] = [
      '#type' => 'checkbox',
      '#title' => 'Check me to reload Select Field field',
      '#ajax' => [
        'callback' => '::buildAjax',
        'wrapper' => 'js_states_test_wrapper',
      ],
    ];
    $form['js_states_test']['select_field'] = [
      '#type' => 'select',
      '#title' => 'Select Field',
      '#options' => [0 => 0, 1 => 1],
      '#default_value' => 0,
    ];
    $form['js_select_field_textfield'] = [
      '#type' => 'select',
      '#title' => 'Select should show when 1 is selected in select_field after ajax',
      '#states' => [
        'visible' => [
          ':input[name="select_field"]' => ['value' => 1],
        ],
      ],
    ];

2. Click on "Check me to reload Select Field field" checkbox
3. Select value 1 for "Select field"
4. 'Select should show when 1 is selected in select_field after ajax' is not visible

Proposed resolution

Detach the states semaphore on unload.

Original report by alexander tallqvist

After upgrading from Drupal 10.2.7 to 10.3.2, I encountered an issue with conditional field visibility in my project. I’ve implemented conditional visibility using form #states, where certain text fields should only be displayed once specific entity reference fields are filled. However, following the changes introduced in issue #3347144 or #3386191, these conditional behaviors no longer function as expected. Now, when an entity reference field is populated, the dependent text field does not become visible.

I suspect the issue I’m experiencing is similar to the one described in #3416398, although that issue has already been closed.

Original Steps to reproduce

Create a content type and add both a text field and an entity reference field (in this case, the entity reference field is used to reference Media).

Develop a custom module and use the field_widget_single_element_form_alter hook in the .module file to add a visibility condition to the text field. For this example, the text field has the machine name field_image_caption_short, and the entity reference field is field_main_media.

function test_conditional_fields_field_widget_single_element_form_alter(&$element, &$form_state, $context): void {

  $field_definition = $context['items']->getFieldDefinition();
  $field_name = $field_definition->getName();

  if ($field_name !== 'field_image_caption_short') {
    return;
  }

  // Create a selector for the "depended_field" field.
  $fieldSelector = sprintf(':input[name="%s[%s]"]', 'field_main_media', 'target_id');

  // Alter the widget state.
  $element['value']['#states'] = [
    'visible' => [
      $fieldSelector => ['filled' => TRUE],
    ],
  ];
}

Confirm that the element names are correct, as the state change should work under these conditions. Notably, the visibility state functions correctly when the text field depends on another text field, rather than an entity reference field.

Original Proposed resolution

After further investigation, I found that the introduction of the once() function in issues #3347144 and #3386191 appears to be the root cause of the problem. To address this, I re-rolled patch #5, which was originally created for #3416398, to ensure compatibility with Drupal 10.3.2. Applying this updated patch resolved the issue for me.