1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-19 13:54:25 +01:00

Fix [form-rich-text] focus

This commit is contained in:
vincent 2022-08-22 15:25:00 +02:00
parent 8679186926
commit 5f8a15bcbb
3 changed files with 14 additions and 9 deletions

View File

@ -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

View File

@ -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' };

View File

@ -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}>