Issue #3181634 by Wongjn: States API: Empty/Filled state with number <input>... (8542a65d) · Commits · project / drupal

core/misc/states.js

+4 −0

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

		checked: {

+15 −0

Original line number	Diff line number	Diff line
		@@ -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',

+21 −0

Original line number	Diff line number	Diff line
		@@ -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,
		);
		},
		};