diff --git a/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx b/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx index 5bf506e44..de083327e 100644 --- a/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx +++ b/app/frontend/src/javascript/components/editorial-block/editorial-block-form.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { Control, FormState, UseFormRegister, UseFormGetValues } from 'react-hook-form'; +import { Control, FormState, UseFormRegister } from 'react-hook-form'; import { FormSwitch } from '../form/form-switch'; import { FormRichText } from '../form/form-rich-text'; import { FormInput } from '../form/form-input'; @@ -12,8 +12,7 @@ interface EditorialBlockFormProps { control: Control>, formState: FormState>, info?: string - keys: Record, - getValues?: UseFormGetValues>, + keys: Record } // regular expression to validate the input fields @@ -22,7 +21,7 @@ const urlRegex = /^(https?:\/\/)([^.]+)\.(.{2,30})(\/.*)*\/?$/; /** * Allows to create a formatted text and optional cta button in a form block, to be included in a resource form managed by react-hook-form. */ -export const EditorialBlockForm: React.FC = ({ register, control, formState, info, keys, getValues }) => { +export const EditorialBlockForm: React.FC = ({ register, control, formState, info, keys }) => { const { t } = useTranslation('admin'); const [isActiveTextBlock, setIsActiveTextBlock] = useState(false); @@ -71,7 +70,6 @@ export const EditorialBlockForm: React.FC = ({ register diff --git a/app/frontend/src/javascript/components/form/form-input.tsx b/app/frontend/src/javascript/components/form/form-input.tsx index 42993f7e1..82169126c 100644 --- a/app/frontend/src/javascript/components/form/form-input.tsx +++ b/app/frontend/src/javascript/components/form/form-input.tsx @@ -1,9 +1,9 @@ -import { ReactNode, useCallback, useState, useEffect } from 'react'; +import { ReactNode, useCallback, useState } from 'react'; import * as React from 'react'; -import { FieldPathValue, UseFormGetValues } from 'react-hook-form'; +import { FieldPathValue } from 'react-hook-form'; import { debounce as _debounce } from 'lodash'; import { FieldValues } from 'react-hook-form/dist/types/fields'; -import { Path, FieldPath } from 'react-hook-form/dist/types/path'; +import { FieldPath } from 'react-hook-form/dist/types/path'; import { FormComponent } from '../../models/form-component'; import { AbstractFormItem, AbstractFormItemProps } from './abstract-form-item'; @@ -22,14 +22,13 @@ type FormInputProps = FormComponent & Ab onChange?: (event: React.ChangeEvent) => void, nullable?: boolean, ariaLabel?: string, - maxLength?: number, - getValues?: UseFormGetValues + maxLength?: number } /** * This component is a template for an input component to use within React Hook Form */ -export const FormInput = ({ id, register, getValues, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps) => { +export const FormInput = ({ id, register, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps) => { const [characterCount, setCharacterCount] = useState(0); /** @@ -70,13 +69,6 @@ export const FormInput = ({ id, re } }; - // If maxLength and getValues is provided, uses input ref to initiate the countdown of characters - useEffect(() => { - if (getValues && maxLength) { - setCharacterCount(getValues(id as Path).length); - } - }, [maxLength, getValues]); - // Compose classnames from props const classNames = [ `${className || ''}`, diff --git a/app/frontend/src/javascript/components/machines/machines-settings.tsx b/app/frontend/src/javascript/components/machines/machines-settings.tsx index d37022672..7bf51d36a 100644 --- a/app/frontend/src/javascript/components/machines/machines-settings.tsx +++ b/app/frontend/src/javascript/components/machines/machines-settings.tsx @@ -24,7 +24,7 @@ interface MachinesSettingsProps { */ export const MachinesSettings: React.FC = ({ onError, onSuccess, beforeSubmit }) => { const { t } = useTranslation('admin'); - const { register, control, formState, handleSubmit, reset, getValues } = useForm>(); + const { register, control, formState, handleSubmit, reset } = useForm>(); /** Link Machines Banner Setting Names to generic keys expected by the Editorial Form */ const bannerKeys: Record = { @@ -63,7 +63,6 @@ export const MachinesSettings: React.FC = ({ onError, onS