Fix tooltip of image choice not showing

Fixes: AFORM-3850
episerver · Jan 2, 2024 · d5ff56c · d5ff56c
1 parent 0cb3e1a
commit d5ff56c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/@episerver/forms-react/src/components/elements/ImageChoiceElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/ImageChoiceElementBlock.tsx
@@ -12,10 +12,10 @@ export const ImageChoiceElementBlock = (props: ImageChoiceElementBlockProps) =>
     const { element } = props;
     const { elementContext, handleChange, handleBlur } = useElement(element);
     const sShouldBeVisible = element.properties.showSelectionInputControl ? "" : "visually-hidden";
-    const { isVisible, validationResults, value, validatorClasses } = elementContext;
+    const { isVisible, validationResults, value, validatorClasses, extraAttr } = elementContext;
 
     return useMemo(()=>(
-        <ElementWrapper className={`FormChoice FormChoice--Image ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
+        <ElementWrapper className={`FormChoice FormChoice--Image ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible} extraAttr={extraAttr}>
             <fieldset aria-describedby={`${element.key}_desc`}>
                 {
                     isNullOrEmpty(element.properties.label) &&

diff --git a/src/@episerver/forms-react/src/components/elements/shared/ElementWrapper.tsx b/src/@episerver/forms-react/src/components/elements/shared/ElementWrapper.tsx
@@ -2,10 +2,11 @@ import { FormValidationResult } from "@episerver/forms-sdk";
 import React, { ReactNode } from "react";
 
 export interface ElementWrapperProps{
-    className?: string
-    isVisible: boolean,
-    children: ReactNode,
-    validationResults?: FormValidationResult
+    className?: string;
+    isVisible: boolean;
+    children: ReactNode;
+    validationResults?: FormValidationResult;
+    extraAttr?: any
 }
 
 export default function ElementWrapper(props: ElementWrapperProps){
@@ -14,7 +15,7 @@ export default function ElementWrapper(props: ElementWrapperProps){
     return (
         <>
             {props.isVisible && (
-                <div className={`Form__Element ${props.className} ${isFail ? "ValidationFail" : "ValidationSuccess"}`}>
+                <div className={`Form__Element ${props.className} ${isFail ? "ValidationFail" : "ValidationSuccess"}`} {...props.extraAttr}>
                     {props.children}
                 </div>
             )}