Issue #3181634 by Wongjn: States API: Empty/Filled state with number <input> does not update when using spinner

core/misc/states.js

@@ -526,6 +526,10 @@
         // the state.
         return this.val() === '';
       },
+      // Listen to 'change' for number native "spinner" widgets.
+      change() {
+        return this.val() === '';
+      },
     },
 
     checked: {

core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php

@@ -106,6 +106,10 @@ class JavascriptStatesForm extends FormBase {
       '#empty_value' => '_none',
       '#empty_option' => '- None -',
     ];
+    $form['number_trigger'] = [
+      '#type' => 'number',
+      '#title' => 'Number trigger',
+    ];
 
     // Tested fields.
     // Checkbox trigger.
@@ -374,6 +378,17 @@ class JavascriptStatesForm extends FormBase {
       ],
     ];
 
+    // Number triggers.
+    $form['item_visible_when_number_trigger_filled_by_spinner'] = [
+      '#type' => 'item',
+      '#title' => 'Item visible when number trigger filled by spinner widget',
+      '#states' => [
+        'visible' => [
+          ':input[name="number_trigger"]' => ['filled' => TRUE],
+        ],
+      ],
+    ];
+
     $form['select'] = [
       '#type' => 'select',
       '#title' => 'select 1',

core/tests/Drupal/Nightwatch/Tests/statesTest.js

@@ -21,4 +21,25 @@ module.exports = {
       .waitForElementNotVisible('input[name="textfield"]', 1000)
       .assert.noDeprecationErrors();
   },
+  'Test number trigger with spinner widget': (browser) => {
+    browser
+      .drupalRelativeURL('/form-test/javascript-states-form')
+      .waitForElementVisible('body', 1000)
+      .waitForElementNotVisible(
+        '#edit-item-visible-when-number-trigger-filled-by-spinner',
+        1000,
+      )
+      .execute(() => {
+        // Emulate usage of the spinner browser widget on number inputs
+        // on modern browsers.
+        const numberTrigger = document.getElementById('edit-number-trigger');
+        numberTrigger.value = 1;
+        numberTrigger.dispatchEvent(new Event('change'));
+      });
+
+    browser.waitForElementVisible(
+      '#edit-item-visible-when-number-trigger-filled-by-spinner',
+      1000,
+    );
+  },
 };