From ee1461ea796b96c408b42fc43df19b8f75d55945 Mon Sep 17 00:00:00 2001
From: Benjamin Franzke <ben@bnf.dev>
Date: Fri, 25 Aug 2023 05:53:25 +0200
Subject: [PATCH] [BUGFIX] Hide form validators label when no one is available
With the deprecation removal of regular expressions
based EXT:form validators in #101070, the set of available
validators for the form element type URL became empty.
(See EXT:form/Configuration/Yaml/FormElements/Url.yaml)
Instead of only removing the select element from the DOM,
the entire form-group is now removed, in order to also hide
the corresponding <label> tag, as such a stray label tag
isn't helpful for an enduser and is therefore actually even
invalid HTML (as the reference to an input element is missing).
Resolves: #101749
Related: #101070
Releases: main, 12.4, 11.5
Change-Id: Ib0d34e94e2c3ba109133dac64374f04f7c91329b
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/80734
Tested-by: core-ci <typo3@b13.com>
Tested-by: Benjamin Franzke <ben@bnf.dev>
Reviewed-by: Benjamin Franzke <ben@bnf.dev>
---
.../FormEditor/Inspector/FinishersEditor.html | 3 ++-
.../Inspector/ValidatorsEditor.html | 3 ++-
.../Backend/FormEditor/InspectorComponent.js | 20 ++++++++++++++++---
3 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
index a69e728af99a..e4ae98f53267 100644
--- a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
+++ b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/FinishersEditor.html
@@ -1,6 +1,6 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="form-editor">
- <div class="t3-form-control-group form-group">
+ <div class="t3-form-control-group form-group" data-template-property="select-group">
<label data-random-id data-random-id-attribute="for" data-random-id-number="1">
<span data-template-property="label"></span>
</label>
@@ -8,6 +8,7 @@
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
</div>
</div>
+ <div class="t3-form-control-group form-group fw-bold" style="margin-bottom: 2.25em" data-template-property="label-no-select"></div>
</div>
<div id="t3-form-inspector-finishers" class="t3-form-collection-container" data-identifier="inspectorFinishers">
</div>
diff --git a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
index 09c3f21633ca..b484e0033ef8 100644
--- a/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
+++ b/typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Inspector/ValidatorsEditor.html
@@ -1,6 +1,6 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<div class="form-editor">
- <div class="t3-form-control-group form-group">
+ <div class="t3-form-control-group form-group" data-template-property="select-group">
<label data-random-id data-random-id-attribute="for" data-random-id-number="1">
<span data-template-property="label"></span>
</label>
@@ -8,6 +8,7 @@
<select data-random-id data-random-id-attribute="id" data-random-id-number="1" data-template-property="selectOptions" class="form-select"></select>
</div>
</div>
+ <div class="t3-form-control-group form-group fw-bold" style="margin-bottom: 2.25em" data-template-property="label-no-select"></div>
</div>
<div id="t3-form-inspector-validators" class="t3-form-collection-container" data-identifier="inspectorValidators">
</div>
diff --git a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
index dedfe40b230c..db9c08533283 100644
--- a/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
+++ b/typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/InspectorComponent.js
@@ -1009,7 +1009,7 @@ define(['jquery',
*/
function renderCollectionElementSelectionEditor(collectionName, editorConfiguration, editorHtml) {
var alreadySelectedCollectionElements, selectElement, collectionContainer,
- removeSelectElement;
+ removeSelectElement, hasAlreadySelectedCollectionElements;
assert(
getUtility().isNonEmptyString(collectionName),
'Invalid configuration "collectionName"',
@@ -1049,7 +1049,12 @@ define(['jquery',
getHelper().getTemplatePropertyDomElement('label', editorHtml).text(editorConfiguration['label']);
selectElement = getHelper().getTemplatePropertyDomElement('selectOptions', editorHtml);
- if (!getUtility().isUndefinedOrNull(alreadySelectedCollectionElements)) {
+ hasAlreadySelectedCollectionElements = (
+ !getUtility().isUndefinedOrNull(alreadySelectedCollectionElements) &&
+ alreadySelectedCollectionElements.length > 0
+ );
+
+ if (hasAlreadySelectedCollectionElements) {
for (var i = 0, len = alreadySelectedCollectionElements.length; i < len; ++i) {
getPublisherSubscriber().publish('view/inspector/collectionElement/existing/selected', [
alreadySelectedCollectionElements[i]['identifier'],
@@ -1081,9 +1086,18 @@ define(['jquery',
}
if (removeSelectElement) {
- selectElement.off().empty().remove();
+ getHelper().getTemplatePropertyDomElement('select-group', editorHtml).off().empty().remove();
+ var labelNoSelect = getHelper().getTemplatePropertyDomElement('label-no-select', editorHtml);
+ if (hasAlreadySelectedCollectionElements) {
+ labelNoSelect.text(editorConfiguration.label);
+ } else {
+ labelNoSelect.remove();
+ }
+ return;
}
+ getHelper().getTemplatePropertyDomElement('label-no-select', editorHtml).remove();
+
selectElement.on('change', function() {
if ($(this).val() !== '') {
var value = $(this).val();
--
GitLab