From bd0d999788a057053010b093d0f1ee7aa66c7b32 Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Mon, 30 Mar 2020 08:14:27 +0200
Subject: [PATCH] [TASK] Focus text field if null placeholder checkbox is
disabled
To improve the UX of null placeholder checkboxes (e.g. used in
sys_file_reference) its assigned text field is now automatically focused
if such checkbox gets disabled.
Resolves: #90879
Releases: master
Change-Id: I5228f49d58276d3c6fc1d19275ca9e92cbdb2f91
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/64001
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Jonas Eberle <flightvision@googlemail.com>
Tested-by: Josef Glatz <josefglatz@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Josef Glatz <josefglatz@gmail.com>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
---
.../Resources/Public/JavaScript/FormEngine.js | 1 +
...nheritanceCest.php => FalMetadataCest.php} | 47 ++++++++++++++++++-
2 files changed, 46 insertions(+), 2 deletions(-)
rename typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/{FalMetadataInheritanceCest.php => FalMetadataCest.php} (79%)
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
index 8310ffdac922..0fdfcd797d40 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/FormEngine.js
@@ -784,6 +784,7 @@ define(['jquery',
if ($checkbox.prop('checked')) {
$item.find('.t3js-formengine-placeholder-placeholder').hide();
$item.find('.t3js-formengine-placeholder-formfield').show();
+ $item.find('.t3js-formengine-placeholder-formfield').find(':input').focus();
} else {
$item.find('.t3js-formengine-placeholder-placeholder').show();
$item.find('.t3js-formengine-placeholder-formfield').hide();
diff --git a/typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/FalMetadataInheritanceCest.php b/typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/FalMetadataCest.php
similarity index 79%
rename from typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/FalMetadataInheritanceCest.php
rename to typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/FalMetadataCest.php
index 5b17110cf068..87e7d942b445 100644
--- a/typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/FalMetadataInheritanceCest.php
+++ b/typo3/sysext/core/Tests/Acceptance/Backend/FormEngine/FalMetadataCest.php
@@ -21,7 +21,7 @@ use TYPO3\CMS\Core\Tests\Acceptance\Support\Helper\PageTree;
/**
* Tests for fal metadata checks
*/
-class FalMetadataInheritanceCest
+class FalMetadataCest
{
/**
* Call backend and open page module of styleguide page
@@ -136,7 +136,6 @@ class FalMetadataInheritanceCest
* test for https://forge.typo3.org/issues/81235
*
* @param BackendTester $I
- * @param PageTree $pageTree
* @throws \Exception
* @depends checkIfUpdatedFileMetadataIsUpdatedInContent
*/
@@ -191,6 +190,50 @@ class FalMetadataInheritanceCest
$I->seeInField('textarea.form-control:disabled', 'Test description');
}
+ /**
+ * This scenario tests whether activating a null placeholder checkbox focuses its assigned text field
+ *
+ * @param BackendTester $I
+ * @param PageTree $pageTree
+ * @depends checkIfUpdatedFileMetadataIsUpdatedInContent
+ * @throws \Exception
+ */
+ public function checkIfDeactivatingNullCheckboxesFocusesTextFields(BackendTester $I, PageTree $pageTree): void
+ {
+ $I->amGoingTo('Check if deactivating null checkboxes focuses text fields');
+ $this->goToPageModule($I, $pageTree);
+ $I->switchToWindow();
+ $I->switchToContentFrame();
+ $I->click('tt_content with image');
+ $I->waitForElementNotVisible('#t3js-ui-block');
+ $I->waitForText('Edit Page Content "tt_content with image" on page "styleguide TCA demo"');
+ $I->click('Images');
+ $I->click('.form-irre-header');
+
+ $I->see('(Default: "Test title")', '.t3js-form-field-eval-null-placeholder-checkbox');
+ $I->see('(Default: "Test alternative")', '.t3js-form-field-eval-null-placeholder-checkbox');
+ $I->see('(Default: "Test description")', '.t3js-form-field-eval-null-placeholder-checkbox');
+
+ $I->amGoingTo('assert checkboxes are not checked');
+ $I->dontSeeCheckboxIsChecked('//input[contains(@name, "[title]") and @type="checkbox" and contains(@name, "control[active][sys_file_reference]")]');
+ $I->dontSeeCheckboxIsChecked('//input[contains(@name, "[alternative]") and @type="checkbox" and contains(@name, "control[active][sys_file_reference]")]');
+ $I->dontSeeCheckboxIsChecked('//input[contains(@name, "[description]") and @type="checkbox" and contains(@name, "control[active][sys_file_reference]")]');
+
+ $I->seeInField('input.form-control:disabled', 'Test title');
+ $I->seeInField('input.form-control:disabled', 'Test alternative');
+ $I->seeInField('textarea.form-control:disabled', 'Test description');
+
+ $I->amGoingTo('enable checkboxes and see whether fields are focused');
+ foreach (['title', 'alternative', 'description'] as $fieldName) {
+ $I->checkOption('//input[contains(@name, "[' . $fieldName . ']") and @type="checkbox" and contains(@name, "control[active][sys_file_reference]")]');
+ $focus = $I->executeJS('let referenceUid = document.querySelector(\'[data-object-uid]\').dataset.objectUid; return document.querySelector(\'[data-formengine-input-name="data[sys_file_reference][\' + referenceUid + \'][' . $fieldName . ']"]\').matches(\':focus\')');
+ $I->assertEquals(true, $focus);
+
+ // Remove focus from field, otherwise codeception can't find other checkboxes
+ $I->click('.form-irre-object .form-section');
+ }
+ }
+
/**
* Open page module of styleguide page
*
--
GitLab