[BUGFIX] EXT:form - fix clicks on checkbox labels in IE/Edge 61/55661/2
authorBenni Mack <benni@typo3.org>
Sat, 10 Feb 2018 22:21:39 +0000 (23:21 +0100)
committerBenni Mack <benni@typo3.org>
Sat, 10 Feb 2018 23:06:44 +0000 (00:06 +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/55661
Tested-by: TYPO3com <no-reply@typo3.com>
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 bd9e8e1..8b5e8b8 100644 (file)
@@ -3,11 +3,12 @@
        <f:render partial="Field/Field" arguments="{element: element}" contentAs="elementContent">
                <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="form-check">
-                                               <label class="form-check-label">
+                                               <label class="form-check-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}"