Issue #3386191 by phthlaap, sukr_s, Ozle, brunoalmeida, smustgrave, Ashley...

Issue #3386191 by phthlaap, sukr_s, Ozle, brunoalmeida, smustgrave, Ashley George, shiv_yadav, larowlan: #states not working correctly when built from a logical combination of multliple fields

(cherry picked from commit 5e2806f1)

core/misc/states.js

@@ -93,15 +93,16 @@
    */
   Drupal.behaviors.states = {
     attach(context, settings) {
-      const $states = $(context).find('[data-drupal-states]');
-      const il = $states.length;
+      // Uses once to avoid duplicates if attach is called multiple times.
+      const elements = once('states', '[data-drupal-states]', context);
+      const il = elements.length;
       for (let i = 0; i < il; i++) {
         const config = JSON.parse(
-          $states[i].getAttribute('data-drupal-states'),
+          elements[i].getAttribute('data-drupal-states'),
         );
         Object.keys(config || {}).forEach((state) => {
           new states.Dependent({
-            element: $($states[i]),
+            element: $(elements[i]),
             state: states.State.sanitize(state),
             constraints: config[state],
           });

core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php

@@ -730,6 +730,30 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#title' => 'Enable textarea',
     ];
 
+    $form['test_select_visible_dependence']['select_visible_1'] = [
+      '#type' => 'select',
+      '#title' => 'Select visible 1',
+      '#options' => [0 => 0, 1 => 1],
+      '#default_value' => 0,
+    ];
+    $form['test_select_visible_dependence']['select_visible_2'] = [
+      '#type' => 'select',
+      '#title' => 'Select visible 2',
+      '#options' => [0 => 0, 1 => 1],
+      '#default_value' => 0,
+    ];
+    $form['test_select_visible_dependence']['select_visible_3'] = [
+      '#type' => 'select',
+      '#title' => 'Select should show when 0 and 1 are selected',
+      '#options' => [0 => 0, 1 => 1],
+      '#states' => [
+        'visible' => [
+          ':input[name="select_visible_1"]' => ['value' => 0],
+          ':input[name="select_visible_2"]' => ['value' => 1],
+        ],
+      ],
+    ];
+
     return $form;
   }
 

core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php

@@ -443,6 +443,15 @@ protected function doSelectTriggerTests() {
     $this->assertFalse($item_visible_value2->isVisible());
     $this->assertTrue($textfield_visible_value3->isVisible());
     $this->assertTrue($textfield_visible_value2_or_value3->isVisible());
+
+    $this->container->get('module_installer')->install(['big_pipe']);
+    $this->drupalGet('form-test/javascript-states-form');
+    $select_visible_2 = $this->assertSession()->elementExists('css', 'select[name="select_visible_2"]');
+    $select_visible_3 = $this->assertSession()->elementExists('css', 'select[name="select_visible_3"]');
+    $this->assertFalse($select_visible_3->isVisible());
+
+    $select_visible_2->setValue('1');
+    $this->assertTrue($select_visible_3->isVisible());
   }
 
   /**