diff --git a/core/misc/ajax.es6.js b/core/misc/ajax.es6.js index fefe9f3031efa4b10243d83a087a7fe06bb833e6..de7904750a9bcdcd2f17f302d1c22002de12cd3e 100644 --- a/core/misc/ajax.es6.js +++ b/core/misc/ajax.es6.js @@ -635,7 +635,7 @@ element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number')) { event.preventDefault(); event.stopPropagation(); - $(ajax.element_settings.element).trigger(ajax.element_settings.event); + $(element).trigger(ajax.element_settings.event); } }; diff --git a/core/misc/ajax.js b/core/misc/ajax.js index 6b15204a267c272b7f7de2f533a255fc7d5f0eef..836bcf593ac9c0f4508e9ff2c2a9ab16dbd6456c 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -291,7 +291,7 @@ if (event.which === 13 || event.which === 32 && element.type !== 'text' && element.type !== 'textarea' && element.type !== 'tel' && element.type !== 'number') { event.preventDefault(); event.stopPropagation(); - $(ajax.element_settings.element).trigger(ajax.element_settings.event); + $(element).trigger(ajax.element_settings.event); } }; diff --git a/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml b/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml index ccca279b69302ea56d1354f2d7e58c254656f5b8..627140841712daddabf745e7bf4764a4acc32f1d 100644 --- a/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml +++ b/core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.routing.yml @@ -30,3 +30,11 @@ ajax_forms_test.lazy_load_form: requirements: _access: 'TRUE' +ajax_forms_test.image_button_form: + path: '/ajax_forms_image_button_form' + defaults: + _title: 'AJAX forms image button test' + _form: '\Drupal\ajax_forms_test\Form\AjaxFormsTestImageButtonForm' + requirements: + _access: 'TRUE' + diff --git a/core/modules/system/tests/modules/ajax_forms_test/src/Callbacks.php b/core/modules/system/tests/modules/ajax_forms_test/src/Callbacks.php index 0ad80c9250a1df953389553678a722f641eba077..06c4b0bb0d063e81243095c991cbc9ba4286f1c2 100644 --- a/core/modules/system/tests/modules/ajax_forms_test/src/Callbacks.php +++ b/core/modules/system/tests/modules/ajax_forms_test/src/Callbacks.php @@ -32,6 +32,15 @@ public function checkboxCallback($form, FormStateInterface $form_state) { return $response; } + /** + * Ajax callback to confirm image button was submitted. + */ + public function imageButtonCallback($form, FormStateInterface $form_state) { + $response = new AjaxResponse(); + $response->addCommand(new HtmlCommand('#ajax_image_button_result', "<div id='ajax-1-more-div'>Something witty!</div>")); + return $response; + } + /** * Ajax callback triggered by the checkbox in a #group. */ diff --git a/core/modules/system/tests/modules/ajax_forms_test/src/Form/AjaxFormsTestImageButtonForm.php b/core/modules/system/tests/modules/ajax_forms_test/src/Form/AjaxFormsTestImageButtonForm.php new file mode 100644 index 0000000000000000000000000000000000000000..20754ffd991d26d6f6389b05f586f6f7f8dc257c --- /dev/null +++ b/core/modules/system/tests/modules/ajax_forms_test/src/Form/AjaxFormsTestImageButtonForm.php @@ -0,0 +1,48 @@ +<?php + +namespace Drupal\ajax_forms_test\Form; + +use Drupal\ajax_forms_test\Callbacks; +use Drupal\Core\Form\FormBase; +use Drupal\Core\Form\FormStateInterface; + +/** + * Form builder: Builds a form that has image button with an ajax callback. + */ +class AjaxFormsTestImageButtonForm extends FormBase { + + /** + * {@inheritdoc} + */ + public function getFormId() { + return 'ajax_forms_test_image_button_form'; + } + + /** + * {@inheritdoc} + */ + public function buildForm(array $form, FormStateInterface $form_state) { + $object = new Callbacks(); + $form['image_button'] = [ + '#type' => 'image_button', + '#name' => 'image_button', + '#src' => 'core/misc/icons/787878/cog.svg', + '#attributes' => ['alt' => $this->t('Edit')], + '#op' => 'edit', + '#ajax' => [ + 'callback' => [$object, 'imageButtonCallback'], + ], + '#suffix' => '<div id="ajax_image_button_result">Image button not pressed yet.</div>', + ]; + + return $form; + } + + /** + * {@inheritdoc} + */ + public function submitForm(array &$form, FormStateInterface $form_state) { + // No submit code needed. + } + +} diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxFormImageButtonTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxFormImageButtonTest.php new file mode 100644 index 0000000000000000000000000000000000000000..4811a350ac7da3c5d50cf951ead3f72d4d4fd431 --- /dev/null +++ b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxFormImageButtonTest.php @@ -0,0 +1,42 @@ +<?php + +namespace Drupal\FunctionalJavascriptTests\Ajax; + +use Drupal\FunctionalJavascriptTests\JavascriptTestBase; + +/** + * Tests the Ajax image buttons work with key press events. + * + * @group Ajax + */ +class AjaxFormImageButtonTest extends JavascriptTestBase { + + /** + * {@inheritdoc} + */ + public static $modules = ['ajax_forms_test']; + + /** + * Tests image buttons can be operated with the keyboard ENTER key. + */ + public function testAjaxImageButton() { + // Get a Field UI manage-display page. + $this->drupalGet('ajax_forms_image_button_form'); + $assertSession = $this->assertSession(); + $session = $this->getSession(); + + $enter_key_event = <<<JS +jQuery('#edit-image-button') + .trigger(jQuery.Event('keypress', { + which: 13 + })); +JS; + // PhantomJS driver has buggy behavior with key events, we send a JavaScript + // key event instead. + // @todo: use WebDriver event when we remove PhantomJS driver. + $session->executeScript($enter_key_event); + + $this->assertNotEmpty($assertSession->waitForElementVisible('css', '#ajax-1-more-div'), 'Page updated after image button pressed'); + } + +}