Issue #1964098 by larowlan | jm.federico: Fixed #ajax doesn't work on #number field types.

core/includes/ajax.inc

@@ -566,6 +566,8 @@ function ajax_pre_render_element($element) {
 
       case 'password':
       case 'textfield':
+      case 'number':
+      case 'tel':
       case 'textarea':
         $element['#ajax']['event'] = 'blur';
         break;

core/misc/ajax.js

@@ -242,10 +242,12 @@ Drupal.ajax.prototype.keypressResponse = function (element, event) {
   var ajax = this;
 
   // Detect enter key and space bar and allow the standard response for them,
-  // except for form elements of type 'text' and 'textarea', where the
-  // spacebar activation causes inappropriate activation if #ajax['keypress'] is
-  // TRUE. On a text-type widget a space should always be a space.
-  if (event.which === 13 || (event.which === 32 && element.type !== 'text' && element.type !== 'textarea')) {
+  // except for form elements of type 'text', 'tel', 'number' and 'textarea',
+  // where the spacebar activation causes inappropriate activation if
+  // #ajax['keypress'] is TRUE. On a text-type widget a space should always be a
+  // space.
+  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);

core/modules/system/lib/Drupal/system/Tests/Ajax/ElementValidationTest.php

@@ -36,5 +36,14 @@ class ElementValidationTest extends AjaxTestBase {
     // Look for a validation failure in the resultant JSON.
     $this->assertNoText(t('Error message'), 'No error message in resultant JSON');
     $this->assertText('ajax_forms_test_validation_form_callback invoked', 'The correct callback was invoked');
+
+    $this->drupalGet('ajax_validation_test');
+    $edit = array('drivernumber' => 12345);
+
+    // Post with 'drivernumber' as the triggering element.
+    $post_result = $this->drupalPostAJAX('ajax_validation_test', $edit, 'drivernumber');
+    // Look for a validation failure in the resultant JSON.
+    $this->assertNoText(t('Error message'), 'No error message in resultant JSON');
+    $this->assertText('ajax_forms_test_validation_number_form_callback invoked', 'The correct callback was invoked');
   }
 }

core/modules/system/tests/modules/ajax_forms_test/ajax_forms_test.module

@@ -460,6 +460,19 @@ function ajax_forms_test_validation_form($form, &$form_state) {
     '#suffix' => '<div id="message_area"></div>',
   );
 
+  $form['drivernumber'] = array(
+    '#title' => t('AJAX-enabled number field.'),
+    '#description' => t("When this one AJAX-triggers and the spare required field is empty, you should not get an error."),
+    '#type' => 'number',
+    '#default_value' => !empty($form_state['values']['drivernumber']) ? $form_state['values']['drivernumber'] : "",
+    '#ajax' => array(
+      'callback' => 'ajax_forms_test_validation_number_form_callback',
+      'wrapper' => 'message_area_number',
+      'method' => 'replace',
+    ),
+    '#suffix' => '<div id="message_area_number"></div>',
+  );
+
   $form['spare_required_field'] = array(
     '#title' => t("Spare Required Field"),
     '#type' => 'textfield',
@@ -492,6 +505,15 @@ function ajax_forms_test_validation_form_callback($form, $form_state) {
   return '<div id="message_area">ajax_forms_test_validation_form_callback at ' . date('c') . '</div>';
 }
 
+/**
+ * Ajax form callback: Selects the 'drivernumber' element of the validation form.
+ */
+function ajax_forms_test_validation_number_form_callback($form, $form_state) {
+  drupal_set_message("ajax_forms_test_validation_number_form_callback invoked");
+  drupal_set_message(t("Callback: drivernumber=%drivernumber, spare_required_field=%spare_required_field", array('%drivernumber' => $form_state['values']['drivernumber'], '%spare_required_field' => $form_state['values']['spare_required_field'])));
+  return '<div id="message_area_number">ajax_forms_test_validation_number_form_callback at ' . date('c') . '</div>';
+}
+
 /**
  * Form builder: Builds a form that triggers a simple AJAX callback.
  */