- Issue created by @tom konda
- Merge request !10158Issue #3486881: Some of checking pressed key should replace event.keyCode with event.key and event.code → (Open) created by tom konda
- 🇯🇵Japan tom konda Kanagawa, Japan
/core/modules/locale/js/locale.admin.js uses event.code instead of event.key because event.key when space key is pressed, returns ' ' (a white space character) which make it little difficult code reading.
- 🇯🇵Japan tom konda Kanagawa, Japan
I investigated a FunctionalJavaScriptTests behavior with the drupalci/chromedriver:dev container and found set wrong value to event.key and event.code on my local environment.
Behat\Mink\Element\NodeElement::keyDown() only calls driver's keyDown() method, so may have a problem on WebDriver or other.Investigation method
- Change /core/misc/tabledrag.js to record some KeyboardEvent value to drupalSetting on a keydown event. (Code 1)
- Change /core/tests/Drupal/FunctionalJavascriptTests/TableDrag/TableDragTest.php to output drupalSettings.keyTest value. (Code 2)
- Test /core/tests/Drupal/FunctionalJavascriptTests/TableDrag/TableDragTest.php
Code 1
// On blur, fire the same function as a touchend/mouseup. This is used to // update values after a row has been moved through the keyboard support. $handle.on('blur', (event) => { if (self.rowObject && self.safeBlur) { self.dropRow(event, self); } }); // Add arrow-key support to the handle. $handle.on('keydown', (event) => { // I added below code for investigation. const {charCode, keyCode, code, key} = event; drupalSettings.keyTest = { charCode, keyCode, code, key }; // I added above code for investigation.
Code 2
protected function moveRowWithKeyboard(NodeElement $row, $arrow, $repeat = 1): void { $keys = [ 'left' => 37, 'right' => 39, 'up' => 38, 'down' => 40, ]; if (!isset($keys[$arrow])) { throw new \InvalidArgumentException('The arrow parameter must be one of "left", "right", "up" or "down".'); } $key = $keys[$arrow]; $handle = $row->find('css', 'a.tabledrag-handle'); $handle->focus(); for ($i = 0; $i < $repeat; $i++) { $this->markRowHandleForDragging($handle); $handle->keyDown($key); // I added below code for investigation. print_r($this->getDrupalSettings()['keyTest']); // I added above code for investigation. $handle->keyUp($key); $this->waitUntilDraggingCompleted($handle); } $handle->blur(); }
Result
PHPUnit 10.5.38 by Sebastian Bergmann and contributors. Runtime: PHP 8.3.13 Configuration: /opt/drupal/web/core/phpunit.xml.dist ..Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) FArray ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) Array ( [charCode] => 40 [code] => [key] => ( [keyCode] => 40 ) Array ( [charCode] => 37 [code] => [key] => % [keyCode] => 37 ) FArray ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) Array ( [charCode] => 40 [code] => [key] => ( [keyCode] => 40 ) Array ( [charCode] => 37 [code] => [key] => % [keyCode] => 37 ) Array ( [charCode] => 40 [code] => [key] => ( [keyCode] => 40 ) Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) FArray ( [charCode] => 40 [code] => [key] => ( [keyCode] => 40 ) Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 ) F 6 / 6 (100%)Array ( [charCode] => 39 [code] => [key] => ' [keyCode] => 39 )