Issue #3087950 by Utkarsh_33, swatichouhan012, komalk, Sivaji_Ganesh_Jojodae,...

Issue #3087950 by Utkarsh_33, swatichouhan012, komalk, Sivaji_Ganesh_Jojodae, Therapychild, Sakthivel M, lauriii, thalles, shalinigaur, kostyashupenko, fhaeberle, amjad1233, sibustephen, pankaj.singh, KondratievaS, pranav.aeer, hooroomoo, ckrina, huzooka: Progress throbber position is incorrect

core/misc/ajax.js

@@ -991,7 +991,13 @@
     this.progress.element = $(
       Drupal.theme('ajaxProgressThrobber', this.progress.message),
     );
-    $(this.element).after(this.progress.element);
+    if ($(this.element).closest('[data-drupal-ajax-container]').length) {
+      $(this.element)
+        .closest('[data-drupal-ajax-container]')
+        .after(this.progress.element);
+    } else {
+      $(this.element).after(this.progress.element);
+    }
   };
 
   /**

core/modules/system/templates/dropbutton-wrapper.html.twig

@@ -13,7 +13,7 @@
 #}
 {% if children %}
   {% apply spaceless %}
-    <div class="dropbutton-wrapper">
+    <div class="dropbutton-wrapper" data-drupal-ajax-container>
       <div class="dropbutton-widget">
         {{ children }}
       </div>

core/modules/views/tests/src/Kernel/Plugin/RowRenderCacheTest.php

@@ -179,7 +179,7 @@ protected function doTestRenderedOutput(AccountInterface $account, $check_cache
       $expected = $access ? "<a href=\"$node_url/delete?destination=/\" hreflang=\"en\">delete</a>" : "";
       $output = $view->style_plugin->getField($index, 'delete_node');
       $this->assertSame($expected, (string) $output);
-      $expected = $access ? '  <div class="dropbutton-wrapper"><div class="dropbutton-widget"><ul class="dropbutton">' .
+      $expected = $access ? '  <div class="dropbutton-wrapper" data-drupal-ajax-container><div class="dropbutton-widget"><ul class="dropbutton">' .
         '<li><a href="' . $node_url . '/edit?destination=/" hreflang="en">Edit</a></li>' .
         '<li><a href="' . $node_url . '/delete?destination=/" hreflang="en">Delete</a></li>' .
         '</ul></div></div>' : '';

core/tests/Drupal/FunctionalJavascriptTests/Ajax/ThrobberTest.php

@@ -20,6 +20,7 @@ class ThrobberTest extends WebDriverTestBase {
     'views_ui',
     'views_ui_test_field',
     'hold_test',
+    'block',
   ];
 
   /**
@@ -93,4 +94,21 @@ public function testThemingThrobberElement() {
     $web_assert->assertNoElementAfterWait('css', '.custom-ajax-progress-throbber');
   }
 
+  /**
+   * Tests progress throbber element position.
+   */
+  public function testProgressThrobberPosition() {
+    $this->drupalLogin($this->rootUser);
+
+    $this->drupalGet('/admin/structure/block');
+    $this->clickLink('Place block');
+    hold_test_response(FALSE);
+    $this->assertSession()->waitForText('Place Block');
+    $this->clickLink('Place block');
+    hold_test_response(TRUE);
+    $this->assertSession()->elementExists('xpath', '//div[contains(@class, "dropbutton-wrapper")]/following-sibling::div[contains(@class, "ajax-progress-throbber")]');
+    hold_test_response(FALSE);
+    $this->assertSession()->assertNoElementAfterWait('css', '.ajax-progress-throbber');
+  }
+
 }

core/themes/stable9/templates/form/dropbutton-wrapper.html.twig

@@ -11,7 +11,7 @@
 #}
 {% if children %}
   {% apply spaceless %}
-    <div class="dropbutton-wrapper">
+    <div class="dropbutton-wrapper" data-drupal-ajax-container>
       <div class="dropbutton-widget">
         {{ children }}
       </div>

core/themes/starterkit_theme/templates/form/dropbutton-wrapper.html.twig

@@ -11,7 +11,7 @@
 #}
 {% if children %}
   {% apply spaceless %}
-    <div class="dropbutton-wrapper">
+    <div class="dropbutton-wrapper" data-drupal-ajax-container>
       <div class="dropbutton-widget">
         {{ children }}
       </div>