Fix raw html in the research form checkbox label

rage · Mar 19, 2024 · f5534e0 · f5534e0
1 parent 9b27c0b
commit f5534e0
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/ResearchFormCheckBoxBlock.tsx
@@ -30,6 +30,7 @@ const ResearchFormCheckBoxBlock: React.FC<
     <>
       <CheckBox
         label={parseText(props.data.attributes.content, terms).parsedText}
+        labelIsRawHtml
         checked={questionIdsAndAnswers[props.data.clientId]}
         onChange={() => handleChange(!questionIdsAndAnswers[props.data.clientId])}
       />

diff --git a/shared-module/src/components/InputFields/CheckBox.tsx b/shared-module/src/components/InputFields/CheckBox.tsx
@@ -78,10 +78,21 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   error?: boolean
   checked?: boolean
   onChangeByValue?: (checked: boolean, name?: string) => void
+  labelIsRawHtml?: boolean
 }
 
 const CheckBox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ onChangeByValue, onChange, className, checked, ...rest }: CheckboxProps, ref) => {
+  (
+    {
+      onChangeByValue,
+      onChange,
+      className,
+      checked,
+      labelIsRawHtml = false,
+      ...rest
+    }: CheckboxProps,
+    ref,
+  ) => {
     const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       if (onChangeByValue) {
         const {
@@ -110,9 +121,10 @@ const CheckBox = forwardRef<HTMLInputElement, CheckboxProps>(
             aria-invalid={rest.error !== undefined}
             onChange={handleOnChange}
             ref={ref}
+            dangerouslySetInnerHTML={labelIsRawHtml ? { __html: rest.label } : undefined}
             {...rest}
           />
-          <span>{rest.label}</span>
+          {!labelIsRawHtml && <span>{rest.label}</span>}
         </Label>
         {rest.error && (
           <span