Issue #2764931 by tedbow, tim.plunkett, nod_, drpal, droplet, dawehner, Wim Leers, phenaproxima: Contextual links don't work with 'use-ajax' links

6 files changed, 59 insertions, 0 deletions

diff --git a/core/modules/contextual/contextual.libraries.yml b/core/modules/contextual/contextual.libraries.yml
index 51281afb527..ec9068037b1 100644
--- a/core/modules/contextual/contextual.libraries.yml
+++ b/core/modules/contextual/contextual.libraries.yml
@@ -20,6 +20,7 @@ drupal.contextual-links:
   dependencies:
     - core/jquery
     - core/drupal
+    - core/drupal.ajax
     - core/drupalSettings
     - core/backbone
     - core/modernizr
diff --git a/core/modules/contextual/js/contextual.es6.js b/core/modules/contextual/js/contextual.es6.js
index 8c2b1aed401..286e1ef9566 100644
--- a/core/modules/contextual/js/contextual.es6.js
+++ b/core/modules/contextual/js/contextual.es6.js
@@ -249,4 +249,19 @@
   Drupal.theme.contextualTrigger = function () {
     return '<button class="trigger visually-hidden focusable" type="button"></button>';
   };
+
+  /**
+   * Bind Ajax contextual links when added.
+   *
+   * @param {jQuery.Event} event
+   *   The `drupalContextualLinkAdded` event.
+   * @param {object} data
+   *   An object containing the data relevant to the event.
+   *
+   * @listens event:drupalContextualLinkAdded
+   */
+  $(document).on('drupalContextualLinkAdded', (event, data) => {
+    Drupal.ajax.bindAjaxLinks(data.$el[0]);
+  });
+
 }(jQuery, Drupal, drupalSettings, _, Backbone, window.JSON, window.sessionStorage));
diff --git a/core/modules/contextual/js/contextual.js b/core/modules/contextual/js/contextual.js
index a23ac66ab3c..ed210d070d5 100644
--- a/core/modules/contextual/js/contextual.js
+++ b/core/modules/contextual/js/contextual.js
@@ -144,4 +144,8 @@
   Drupal.theme.contextualTrigger = function () {
     return '<button class="trigger visually-hidden focusable" type="button"></button>';
   };
+
+  $(document).on('drupalContextualLinkAdded', function (event, data) {
+    Drupal.ajax.bindAjaxLinks(data.$el[0]);
+  });
 })(jQuery, Drupal, drupalSettings, _, Backbone, window.JSON, window.sessionStorage);
\ No newline at end of file
diff --git a/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml b/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml
index 35e03b7333d..1738756a12e 100644
--- a/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml
+++ b/core/modules/contextual/tests/modules/contextual_test/contextual_test.links.contextual.yml
@@ -2,3 +2,11 @@ contextual_test:
   title: 'Test Link'
   route_name: 'contextual_test'
   group: 'contextual_test'
+contextual_test_ajax:
+  title: 'Test Link with Ajax'
+  route_name: 'contextual_test'
+  group: 'contextual_test'
+  options:
+    attributes:
+      class: ['use-ajax']
+      data-dialog-type: 'modal'
diff --git a/core/modules/contextual/tests/modules/contextual_test/contextual_test.module b/core/modules/contextual/tests/modules/contextual_test/contextual_test.module
index b8f2e60f510..d57255cf104 100644
--- a/core/modules/contextual/tests/modules/contextual_test/contextual_test.module
+++ b/core/modules/contextual/tests/modules/contextual_test/contextual_test.module
@@ -15,3 +15,23 @@ function contextual_test_block_view_alter(array &$build, BlockPluginInterface $b
     'route_parameters' => [],
   ];
 }
+
+/**
+ * Implements hook_contextual_links_view_alter().
+ *
+ * @todo Apparently this too late to attach the library?
+ * It won't work without contextual_test_page_attachments_alter()
+ * Is that a problem? Should the contextual module itself do the attaching?
+ */
+function contextual_test_contextual_links_view_alter(&$element, $items) {
+  if (isset($element['#links']['contextual-test-ajax'])) {
+    $element['#attached']['library'][] = 'core/drupal.dialog.ajax';
+  }
+}
+
+/**
+ * Implements hook_page_attachments_alter().
+ */
+function contextual_test_page_attachments_alter(array &$attachments) {
+  $attachments['#attached']['library'][] = 'core/drupal.dialog.ajax';
+}
diff --git a/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php b/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php
index a24d2bae597..de836924119 100644
--- a/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php
+++ b/core/modules/contextual/tests/src/FunctionalJavascript/ContextualLinksTest.php
@@ -69,6 +69,17 @@ class ContextualLinksTest extends JavascriptTestBase {
     $this->clickContextualLink('#block-branding', 'Test Link');
     $this->assertSession()->pageTextContains('Everything is contextual!');
 
+    // Test click a contextual link that uses ajax.
+    $this->drupalGet('user');
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $current_page_string = 'NOT_RELOADED_IF_ON_PAGE';
+    $this->getSession()->executeScript('document.body.appendChild(document.createTextNode("' . $current_page_string . '"));');
+    $this->clickContextualLink('#block-branding', 'Test Link with Ajax');
+    $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', '#drupal-modal'));
+    $this->assertSession()->elementContains('css', '#drupal-modal', 'Everything is contextual!');
+    // Check to make sure that page was not reloaded.
+    $this->assertSession()->pageTextContains($current_page_string);
+
     // Test clicking contextual link with toolbar.
     $this->container->get('module_installer')->install(['toolbar']);
     $this->grantPermissions(Role::load(Role::AUTHENTICATED_ID), ['access toolbar']);