Commit 89605308 authored by catch's avatar catch

Issue #2711907 by drpal, droplet, andrewmacpherson, starshaped, mckinzie25,...

Issue #2711907 by drpal, droplet, andrewmacpherson, starshaped, mckinzie25, hchonov: [regression] Some ajax-enabled buttons are not keyboard operable
parent 73bfe912
......@@ -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);
}
};
......
......@@ -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);
}
};
......
......@@ -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'
......@@ -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.
*/
......
<?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.
}
}
<?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');
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment