From d6b6ad8fd6b479d5721cf0e4cddba04a1dbc3d0d Mon Sep 17 00:00:00 2001
From: catch <catch@35733.no-reply.drupal.org>
Date: Mon, 1 Jan 2024 15:28:41 +0000
Subject: [PATCH] =?UTF-8?q?Issue=20#3347144=20by=20dgtlmoon,=20mstrelan,?=
 =?UTF-8?q?=20Evaldas=20U=C5=BEkuras,=20bkosborne,=20FeyP,=20pirvudoru:=20?=
 =?UTF-8?q?Form=20API=20#states=20property/states=20should=20use=20.once()?=
 =?UTF-8?q?=20to=20apply=20its=20rules=20(Can=20cause=20failures=20with=20?=
 =?UTF-8?q?BigPipe=20and=20possibly=20other=20situations)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/misc/states.js                                   | 11 ++++++-----
 .../Core/Form/JavascriptStatesTest.php                |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/core/misc/states.js b/core/misc/states.js
index 218b8926888..7399aacb38a 100644
--- a/core/misc/states.js
+++ b/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;
+      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],
           });
@@ -120,7 +121,7 @@
    *
    * @constructor Drupal.states.Dependent
    *
-   * @param {object} args
+   * @param {{state: Drupal.states.state, constraints: *, element: (*|jQuery|HTMLElement)}} args
    *   Object with the following keys (all of which are required)
    * @param {jQuery} args.element
    *   A jQuery object of the dependent element
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php
index ab7425a252d..2624a15ce36 100644
--- a/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Core/Form/JavascriptStatesTest.php
@@ -27,7 +27,7 @@ class JavascriptStatesTest extends WebDriverTestBase {
   /**
    * {@inheritdoc}
    */
-  protected static $modules = ['form_test'];
+  protected static $modules = ['form_test', 'big_pipe'];
 
   /**
    * {@inheritdoc}