SONAR-20461 Hovering/clicking on label label shouldn't interact with target input

1 files changed, 12 insertions, 6 deletions

diff --git a/server/sonar-web/design-system/src/components/input/FormField.tsx b/server/sonar-web/design-system/src/components/input/FormField.tsx
index 1f525a01ea7..004fa45d3ec 100644
--- a/server/sonar-web/design-system/src/components/input/FormField.tsx
+++ b/server/sonar-web/design-system/src/components/input/FormField.tsx
@@ -52,15 +52,15 @@ export function FormField({
 }: Props) {
   return (
     <FieldWrapper className={className} id={id}>
-      <label aria-label={ariaLabel} className="sw-mb-2" htmlFor={htmlFor} title={title}>
-        <Highlight className="sw-flex sw-items-center sw-gap-2">
+      <Highlight className="sw-mb-2 sw-flex sw-items-center sw-gap-2">
+        <StyledLabel aria-label={ariaLabel} htmlFor={htmlFor} title={title}>
           {label}
           {required && (
-            <RequiredIcon aria-label={requiredAriaLabel ?? 'required'} className="sw--ml-1" />
+            <RequiredIcon aria-label={requiredAriaLabel ?? 'required'} className="sw-ml-1" />
           )}
-          {help}
-        </Highlight>
-      </label>
+        </StyledLabel>
+        {help}
+      </Highlight>
 
       {children}
 
@@ -69,6 +69,12 @@ export function FormField({
   );
 }
 
+// This is needed to prevent the target input/button from being focused
+// when clicking/hovering on the label. More info https://stackoverflow.com/questions/9098581/why-is-hover-for-input-triggered-on-corresponding-label-in-css
+const StyledLabel = styled.label`
+  pointer-events: none;
+`;
+
 const FieldWrapper = styled.div`
   ${tw`sw-flex sw-flex-col sw-w-full`}