Fix [form-rich-text] focus

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Updated portuguese translations
 - Fix a bug: wrong variable reference in `SingleSignOnConcern:Merge_form_sso`
+- Fix a bug: wrong focus behavior on text editor
 
 ## v5.4.15 2022 August 1
 

app/frontend/src/javascript/components/form/abstract-form-item.tsx

@@ -9,15 +9,16 @@ export interface AbstractFormItemProps<TFieldValues> extends PropsWithChildren<A
   tooltip?: ReactNode,
   className?: string,
   disabled?: boolean|((id: string) => boolean),
-  onLabelClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void,
+  onLabelClick?: (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) => void,
   inLine?: boolean,
+  containerType?: 'label' | 'div'
 }
 
 /**
  * This abstract component should not be used directly.
  * Other forms components that are intended to be used with react-hook-form must extend this component.
  */
-export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label, tooltip, className, disabled, error, warning, rules, formState, onLabelClick, inLine, children }: AbstractFormItemProps<TFieldValues>) => {
+export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label, tooltip, className, disabled, error, warning, rules, formState, onLabelClick, inLine, containerType, children }: AbstractFormItemProps<TFieldValues>) => {
   const [isDirty, setIsDirty] = useState<boolean>(false);
   const [fieldError, setFieldError] = useState<{ message: string }>(error);
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
@@ -52,16 +53,16 @@ export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label,
    * This function is called when the label is clicked.
    * It is used to focus the input.
    */
-  function handleLabelClick (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) {
+  function handleLabelClick (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) {
     if (typeof onLabelClick === 'function') {
       onLabelClick(event);
     }
   }
 
-  return (
-    <label className={`form-item ${classNames}`} onClick={handleLabelClick}>
+  return React.createElement(containerType, { className: `form-item ${classNames}` }, (
+    <>
       {(label && !inLine) && <div className='form-item-header'>
-        <p>{label}</p>
+        <p onClick={handleLabelClick}>{label}</p>
         {tooltip && <div className="item-tooltip">
           <span className="trigger"><i className="fa fa-question-circle" /></span>
           <div className="content">{tooltip}</div>
@@ -79,6 +80,8 @@ export const AbstractFormItem = <TFieldValues extends FieldValues>({ id, label,
       </div>
       {(isDirty && fieldError) && <div className="form-item-error">{fieldError.message}</div> }
       {(isDirty && warning) && <div className="form-item-warning">{warning.message}</div> }
-    </label>
-  );
+    </>
+  ));
 };
+
+AbstractFormItem.defaultProps = { containerType: 'label' };

app/frontend/src/javascript/components/form/form-rich-text.tsx

@@ -35,13 +35,14 @@ export const FormRichText = <TFieldValues extends FieldValues, TContext extends
    * We do not want the default behavior (focus the first child, which is the Bold button)
    * but we want to focus the text edition area.
    */
-  function focusTextEditor (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) {
+  function focusTextEditor (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) {
     event.preventDefault();
     textEditorRef.current.focus();
   }
 
   return (
     <AbstractFormItem id={id} label={label} tooltip={tooltip}
+                      containerType={'div'}
                       className={`form-rich-text ${className || ''}`}
                       error={error} warning={warning} rules={rules}
                       disabled={disabled} formState={formState} onLabelClick={focusTextEditor}>