From d3dffb899b828b211c19a17bfda25f1f6e359600 Mon Sep 17 00:00:00 2001
From: Kiza Online <kizaonline@gmail.com>
Date: Mon, 30 Mar 2026 15:36:04 +1100
Subject: [PATCH] AP-7845 # Fix repeatable set label behavior

---
 CHANGELOG.md                                  |  4 +++
 .../renderer/FormElementLabelContainer.tsx    | 26 ++++++++++++-------
 .../FormElementRepeatableSet.tsx              |  3 +--
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c0a368df7..f3cd2a23e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Repeatable set label acting as add button
+
 ### Changed
 
 - **[BREAKING]** `draftService.syncDrafts` to download draft data in the background
diff --git a/src/components/renderer/FormElementLabelContainer.tsx b/src/components/renderer/FormElementLabelContainer.tsx
index 7b28903a0..0f9e69846 100644
--- a/src/components/renderer/FormElementLabelContainer.tsx
+++ b/src/components/renderer/FormElementLabelContainer.tsx
@@ -12,6 +12,7 @@ function FormElementLabelContainer({
   required,
   children,
   leading,
+  associateLabelWithInput = true,
 }: {
   className: string
   element: FormTypes.FormElementBase
@@ -19,20 +20,27 @@ function FormElementLabelContainer({
   required: boolean
   children: React.ReactNode
   leading?: React.ReactNode
+  /** When false, render the title as a span (no htmlFor), e.g. repeatable sets with no single control. */
+  associateLabelWithInput?: boolean
 }) {
+  const labelId = `${id}-label`
+  const labelClassName = clsx('ob-label', {
+    'ob-label__required is-required': required,
+  })
+
   return (
     <div className={clsx('ob-form__element', className)}>
       <div className="label ob-label__container">
         {leading}
-        <label
-          className={clsx('ob-label', {
-            'ob-label__required is-required': required,
-          })}
-          htmlFor={id}
-          id={`${id}-label`}
-        >
-          {element.label}
-        </label>
+        {associateLabelWithInput ? (
+          <label className={labelClassName} htmlFor={id} id={labelId}>
+            {element.label}
+          </label>
+        ) : (
+          <span className={labelClassName} id={labelId}>
+            {element.label}
+          </span>
+        )}
         {element.hint &&
           (element.hintPosition === 'TOOLTIP' || !element.hintPosition) && (
             <HintTooltip hint={element.hint} inputId={id} />
diff --git a/src/form-elements/FormElementRepeatableSet.tsx b/src/form-elements/FormElementRepeatableSet.tsx
index 25e4c9eda..e19bc2b73 100644
--- a/src/form-elements/FormElementRepeatableSet.tsx
+++ b/src/form-elements/FormElementRepeatableSet.tsx
@@ -401,12 +401,12 @@ function FormElementRepeatableSet({
         element={element}
         id={id}
         required={!!minSetEntries && minSetEntries > 0}
+        associateLabelWithInput={false}
       >
         {element.layout === 'MULTIPLE_ADD_BUTTONS' && showAddButton && (
           <AddButton
             onAdd={() => handleAddEntry(0)}
             element={element}
-            id={id}
             classes={['ob-button-repeatable-set-layout__multiple-add-buttons']}
           />
         )}
@@ -445,7 +445,6 @@ function FormElementRepeatableSet({
             <AddButton
               onAdd={() => handleAddEntry(entries.length)}
               element={element}
-              id={id}
             />
           )}
         {(isDirty || displayValidationMessage) &&