From 8542a65d49e6ebd3b32689c03c265423f9f9f95f Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Mon, 20 Feb 2023 18:24:38 +0200
Subject: [PATCH] Issue #3181634 by Wongjn: States API: Empty/Filled state with
number <input> does not update when using spinner
---
core/misc/states.js | 4 ++++
.../src/Form/JavascriptStatesForm.php | 15 +++++++++++++
.../Drupal/Nightwatch/Tests/statesTest.js | 21 +++++++++++++++++++
3 files changed, 40 insertions(+)
diff --git a/core/misc/states.js b/core/misc/states.js
index 39cd7b41bb3a..643a72f146d7 100644
--- a/core/misc/states.js
+++ b/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: {
diff --git a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php
index 4f8095739ff2..851c55e2fc53 100644
--- a/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php
+++ b/core/modules/system/tests/modules/form_test/src/Form/JavascriptStatesForm.php
@@ -106,6 +106,10 @@ public function buildForm(array $form, FormStateInterface $form_state) {
'#empty_value' => '_none',
'#empty_option' => '- None -',
];
+ $form['number_trigger'] = [
+ '#type' => 'number',
+ '#title' => 'Number trigger',
+ ];
// Tested fields.
// Checkbox trigger.
@@ -374,6 +378,17 @@ public function buildForm(array $form, FormStateInterface $form_state) {
],
];
+ // 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',
diff --git a/core/tests/Drupal/Nightwatch/Tests/statesTest.js b/core/tests/Drupal/Nightwatch/Tests/statesTest.js
index 2ae6d41de457..4d48d8d3aac8 100644
--- a/core/tests/Drupal/Nightwatch/Tests/statesTest.js
+++ b/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,
+ );
+ },
};
--
GitLab