🐛 [open-formulieren/open-forms#3577] Fix checkbox/radio buttons on we…

…bkit The label in our Open Forms theme stretches to the left side of the checkbox, where the padding overlays the checkbox itself. On WebKit, this blocks the click event/pointer event to the checkbox itself (Chrome/Firefox are okay with this). Swapping the order of the elements in the DOM still visually positions them correctly while now allowing the input the lay on top of the div/paragraph/label because it comes later in the document tree. Backport-of: 5e10f86
open-formulieren · Nov 9, 2023 · d07d0dd · d07d0dd
1 parent b646d30
commit d07d0dd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/src/components/forms/Checkbox/Checkbox.js b/src/components/forms/Checkbox/Checkbox.js
@@ -26,6 +26,11 @@ const Checkbox = ({
   return (
     <Wrapper>
       <FormField type="checkbox" invalid={invalid} className="utrecht-form-field--openforms">
+        <div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
+          <LabelContent id={id} isRequired={isRequired} disabled={disabled} type="checkbox">
+            {label}
+          </LabelContent>
+        </div>
         <Field
           name={name}
           as={UtrechtCheckbox}
@@ -38,11 +43,6 @@ const Checkbox = ({
           appearance="custom"
           {...inputProps}
         />
-        <div className="utrecht-form-field__label utrecht-form-field__label--checkbox">
-          <LabelContent id={id} isRequired={isRequired} disabled={disabled} type="checkbox">
-            {label}
-          </LabelContent>
-        </div>
         <HelpText>{description}</HelpText>
         {touched && <ValidationErrors error={error} />}
       </FormField>

diff --git a/src/formio/templates/checkbox.ejs b/src/formio/templates/checkbox.ejs
@@ -1,13 +1,3 @@
-<input
-  ref="input"
-  id="{{ctx.instance.id}}-{{ctx.component.key}}"
-
-  {% for (var attr in ctx.input.attr) { %}
-    {{attr}}="{{ctx.input.attr[attr]}}"
-  {% } %}
-
-  {% if (ctx.checked) { %}checked=true{% } %}
->
 
 <p class="utrecht-form-field__label utrecht-form-field__label--checkbox">
   <label
@@ -20,3 +10,14 @@
     {% } %}
   </label>
 </p>
+
+<input
+  ref="input"
+  id="{{ctx.instance.id}}-{{ctx.component.key}}"
+
+  {% for (var attr in ctx.input.attr) { %}
+    {{attr}}="{{ctx.input.attr[attr]}}"
+  {% } %}
+
+  {% if (ctx.checked) { %}checked=true{% } %}
+>
diff --git a/src/formio/templates/radio.ejs b/src/formio/templates/radio.ejs
@@ -1,6 +1,14 @@
 <!-- rendered by both radio and selectboxes component -->
 {% ctx.values.forEach(function(item) { %}
 <div class="utrecht-form-field utrecht-form-field--{{ctx.component.inputType}} utrecht-form-field--openforms">
+  <p class="utrecht-paragraph utrecht-form-field__label utrecht-form-field__label--{{ctx.component.inputType}}">
+    <label
+      for="{{ctx.id}}{{ctx.row}}-{{item.value}}"
+      class="utrecht-form-label utrecht-form-label--{{ctx.component.inputType}} {% if (ctx.disabled) { %}utrecht-form-label--disabled{% } %}"
+    >
+      {{ item.label }}
+    </label>
+  </p>
   <input
     ref="input"
     value="{{item.value}}"
@@ -14,13 +22,5 @@
     checked=true
     {% } %}
   >
-  <p class="utrecht-paragraph utrecht-form-field__label utrecht-form-field__label--{{ctx.component.inputType}}">
-    <label
-      for="{{ctx.id}}{{ctx.row}}-{{item.value}}"
-      class="utrecht-form-label utrecht-form-label--{{ctx.component.inputType}} {% if (ctx.disabled) { %}utrecht-form-label--disabled{% } %}"
-    >
-      {{ item.label }}
-    </label>
-  </p>
 </div>
 {% }) %}