[BUGFIX] EXT:form - fix clicks on checkbox labels in IE/Edge 03/55203/6
authorMathias Brodala <mbrodala@pagemachine.de>
Fri, 22 Dec 2017 16:48:54 +0000 (17:48 +0100)
committerBenni Mack <benni@typo3.org>
Sat, 10 Feb 2018 20:51:35 +0000 (21:51 +0100)
Add the "for" attribute to help Internet Explorer and Edge to target
the actual checkbox field, not the hidden field in front of it.

Resolves: #83417
Releases: master, 8.7
Change-Id: I603f95fc18df57f64d5dde8aefe6338c47b29536
Reviewed-on: https://review.typo3.org/55203
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
typo3/sysext/form/Resources/Private/Frontend/Partials/Checkbox.html
typo3/sysext/form/Resources/Private/Frontend/Partials/MultiCheckbox.html
typo3/sysext/form/Resources/Private/Frontend/Partials/RadioButton.html

index 1faed89..bfb7e82 100644 (file)
@@ -2,7 +2,7 @@
 <formvh:renderRenderable renderable="{element}">
        <f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
                <div class="form-check">
-                       <label class="{element.properties.elementClassAttribute} form-check-label">
+                       <label class="{element.properties.elementClassAttribute} form-check-label" for="{element.uniqueIdentifier}">
                                <f:form.checkbox
                                        property="{element.identifier}"
                                        id="{element.uniqueIdentifier}"
index 7f209e4..cce2ead 100644 (file)
@@ -2,12 +2,13 @@
 <formvh:renderRenderable renderable="{element}">
        <f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
                <div id="{element.uniqueIdentifier}" class="inputs-list">
-                       <f:for each="{element.properties.options}" as="label" key="value">
+                       <f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
                                <div class="form-check">
-                                       <label class="form-check-label">
+                                       <label class="form-check-label" for="{element.uniqueIdentifier}-{idIterator.index}">
                                                <f:form.checkbox
                                                        property="{element.identifier}"
                                                        multiple="1"
+                                                       id="{element.uniqueIdentifier}-{idIterator.index}"
                                                        class="{element.properties.elementClassAttribute}"
                                                        value="{value}"
                                                        errorClass="{element.properties.elementErrorClassAttribute}"
index f736e91..2f60429 100644 (file)
@@ -5,11 +5,12 @@
                <div class="{element.properties.containerClassAttribute}">
                        <div id="{element.uniqueIdentifier}" class="inputs-list">
                                <div class="form-group">
-                                       <f:for each="{element.properties.options}" as="label" key="value">
+                                       <f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
                                                <div class="radio">
-                                                       <label>
+                                                       <label for="{element.uniqueIdentifier}-{idIterator.index}">
                                                                <f:form.radio
                                                                        property="{element.identifier}"
+                                                                       id="{element.uniqueIdentifier}-{idIterator.index}"
                                                                        class="{element.properties.elementClassAttribute} form-check-input"
                                                                        value="{value}"
                                                                        errorClass="{element.properties.elementErrorClassAttribute}"