ImageInput clones its child

[fzaninotto]

What you were expecting:

Using ImageInput with a custom preview component works:

const PreviewField = () => <ImageField source="src" title="title" />;

<ImageInput source="pictures" label="Related pictures" accept="image/*">
    <PreviewField />
</ImageInput>

What happened instead:

The preview doesn't work. To make it work, one has to pass the props explicitly in the preview component:

const PreviewField = (props) => <ImageField source="src" title="title" {...props} />;

This may be natural in 3.0, but in 4.0 this is unexpected.

Related code:

The culprit is <FileInput>, which still clones its child instead of wrapping it in a RecordContext:

react-admin/packages/ra-ui-materialui/src/input/FileInput.tsx

Lines 189 to 205 in 8287a60

	{children && (
	<div className="previews">
	{files.map((file, index) => (
	<FileInputPreview
	key={index}
	file={file}
	onRemove={onRemove(file)}
	className={FileInputClasses.removeButton}
	>
	{cloneElement(childrenElement as ReactElement, {
	record: file,
	className: FileInputClasses.preview,
	})}
	</FileInputPreview>
	))}
	</div>
	)}

Environment

• React-admin version: 4
• Last version that did not exhibit the issue (if applicable): 3
• React version:18
• Browser: Chrome

[thibault-barrat]

I experienced this problem and I can add that <FileInput> uses the source props of its children to create the file which is passed as a record to its children :

react-admin/packages/ra-ui-materialui/src/input/FileInput.tsx

Lines 55 to 63 in 8287a60

	const { source, title } = (Children.only(children) as ReactElement<
	any
	>).props;
	const preview = URL.createObjectURL(file);
	const transformedFile = {
	rawFile: file,
	[source]: preview,
	};

So, the custom preview component must have a source props to make it work.