diff --git a/src/common/components/dateTimeTextField/DateTimeTextField.tsx b/src/common/components/dateTimeTextField/DateTimeTextField.tsx
index 18bf00f5..cb725ed8 100644
--- a/src/common/components/dateTimeTextField/DateTimeTextField.tsx
+++ b/src/common/components/dateTimeTextField/DateTimeTextField.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import type { InputProps } from 'react-admin';
+import type { InputProps, Validator } from 'react-admin';
import { useInput, useRecordContext, useTranslate } from 'react-admin';
import type { TextFieldProps } from '@mui/material/TextField';
import TextField from '@mui/material/TextField';
@@ -12,52 +12,68 @@ const useStyles = makeStyles({
textFieldInput: { width: '100%' },
});
+/**
+ * Removes the special prefix `@@react-admin@@` and the needless quotation marks
+ * that might be added by the useInput-hook.
+ * @param message the translation key (with ra-core's special prefix to avoid double translation)
+ * @returns the fixed translation key
+ * @example
+ * Warning: Missing translation for key: "@@react-admin@@"occurrences.fields.time.fields.time.errorMessage""
+ * @example
+ * // a code related to the validation in the useInput.ts...
+ * validate: async (value, values) => {
+ * if (!sanitizedValidate) return true;
+ * const error = await sanitizedValidate(value, values, props);
+ * if (!error) return true;
+ * // react-hook-form expects errors to be plain strings but our validators can return objects
+ * // that have message and args.
+ * // To avoid double translation for users that validate with a schema instead of our validators
+ * // we use a special format for our validators errors.
+ * // The ValidationError component will check for this format and extract the message and args
+ * // to translate.
+ * return `@@react-admin@@${JSON.stringify(error)}`
+ */
+const handleUseInputDoubleValidationMessage = (message: string) =>
+ message.replace('@@react-admin@@', '').replaceAll('"', '');
+
export type BoundedTextFieldProps = InputProps & TextFieldProps;
const BoundedTextField = (props: BoundedTextFieldProps) => {
const translate = useTranslate();
const classes = useStyles();
-
- const { label, variant, defaultValue, disabled } = props;
const {
- field: { name, onChange },
+ field,
fieldState: { isTouched, error },
formState: { isSubmitted },
- isRequired,
} = useInput(props);
return (
);
};
-const validateDate = (value: string) => {
- return moment(value, 'D.M.YYYY', true).isValid()
+const validateDate: Validator = (value: string) =>
+ moment(value, 'D.M.YYYY', true)?.isValid()
? undefined
: 'occurrences.fields.time.fields.date.errorMessage';
-};
-const validateTime = (value: string) => {
- return moment(value, 'H:mm', true).isValid()
+const validateTime: Validator = (value: string) =>
+ moment(value, 'H:mm', true)?.isValid()
? undefined
: 'occurrences.fields.time.fields.time.errorMessage';
-};
const DateTimeTextInput = ({
variant,
diff --git a/src/domain/occurrences/OccurrenceCreate.tsx b/src/domain/occurrences/OccurrenceCreate.tsx
index b01a98bf..cea3854e 100644
--- a/src/domain/occurrences/OccurrenceCreate.tsx
+++ b/src/domain/occurrences/OccurrenceCreate.tsx
@@ -4,7 +4,6 @@ import {
SimpleForm,
SelectInput,
ReferenceInput,
- required,
Loading,
} from 'react-admin';
import Grid from '@mui/material/Grid';
@@ -26,10 +25,11 @@ const OccurrenceCreateForm = () => {
label="occurrences.fields.venue.label"
source="venueId"
reference="venues"
- validate={[required()]}
+ isRequired
fullWidth
>
{
label="occurrences.fields.venue.label"
source="venue.id"
reference="venues"
- validate={[required()]}
+ isRequired
fullWidth
>