Add <InPlaceEditor> for edit-in-place

[fzaninotto]

Problem

To edit a value from a record, users have to leave the current screen to go to an Edit view (or use EditInDialog, but they will also lose context).

Solution

<InPlaceEditor> renders a field from the current record. On click, it switches to an editable state, allowing the user to change the value directly.

InPlaceEditor.mp4

Use this component to let users edit parts of a record directly in the list or detail view. It is useful for quick edits without navigating to a separate edit page.

import { Show, InPlaceEditor } from 'react-admin';
import { Stack, Box, Typography } from '@mui/material';

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>
);

The field changes color on hover, to indicate that it is editable. The user can cancel the edit by pressing Escape. The field is saved automatically when the user clicks outside of it or presses Enter. While it is being saved, the field is disabled and a loading spinner is shown. If the save fails, an error message is displayed and the original value is restored.

This component can even help replace the <EditableDatagrid>:

InPlaceEditorDataTable.mov

How To Test

http://localhost:9010/?path=/story/ra-ui-materialui-input-inplaceeditor--basic

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date
• Make the doc discoverable by adding links to it

[fzaninotto]

Switching to RFR

[slax57]

Other than that this new component works very well and the UX is 👌

[fzaninotto]

Thanks for the great review, I've taken most of your comments into account and added my comments where I disagree.

[dalen]

To use this in <EditableDatagrid>, doesn't the handleEdit event handler need to do event.stopPropagation()?

Or could some prop be added to enable that behavior?

[fzaninotto]

@dalen Integrating InPlaceEditor and EditableDatagrid is not an objective for us, because we're now focusing on the new DataTable component. You can see an example integration between InPlaceEditor and DataTable in the storybook: https://react-admin-storybook.vercel.app/?path=/story/ra-ui-materialui-input-inplaceeditor--editable-data-table

For editable datagrid, we recommend using <DatagridAG>, which is more flexible.