I’m using the new InPlaceEditor component from React-Admin to allow inline editing of fields in a Show view.
Here’s a simplified version of my code:
import { Show, InPlaceEditor } from 'react-admin';
import { Stack, Box, Typography } from '@mui/material';
import { AvatarField, CustomerActions } from './components';
const CustomerShow = () => (
<Show>
<Stack direction="row" spacing={2}>
<AvatarField />
<CustomerActions />
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Typography>Phone</Typography>
<InPlaceEditor source="phone" />
</Box>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<Typography>Email</Typography>
<InPlaceEditor source="email" />
</Box>
</Stack>
</Show>
);
When the field has a value, InPlaceEditor displays it correctly and shows a pointer cursor on hover, making it obvious that the field can be clicked to edit.
But when the field is empty (null or empty string), the component renders nothing and no cursor is shown, so users don’t know it’s editable.
👉 How can I configure InPlaceEditor so that even when the value is empty, it shows a placeholder (e.g. "Click to edit...") and still displays the pointer cursor?
I checked the RA docs but couldn’t find an option for this. Do I need to wrap it manually, or is there a built-in way?
-
To me this looks like an oversight, you can probably open an issue in the react-admin repo about this.slax57– slax572025年10月04日 19:02:34 +00:00Commented Oct 4, 2025 at 19:02