React-admin: Saving Edit without making changes clears values on Resource without list.

Created on 14 Feb 2019  路  3Comments  路  Source: marmelab/react-admin

What you were expecting:
I navigated to an Edit view, didn't make any changes and hit Save. I expected the form values to remain after clicking Save on the edit form.

What happened instead:
Instead, they disappeared.

Steps to reproduce:

  1. Pass a history object to the <Admin /> component, created from createBrowserHistory().
  2. Use a custom sidebar menu that allows you to display Resources that only have an edit prop (no list prop). The menu links directly to a specific id, so /{resource-name}/{specific-id}.
  3. Create an <Edit /> view with <SimpleForm {...props} redirect="edit" />.
  4. Navigate to the form, do not make any changes and simply click Save.
  5. Observe that all form fields get blanked out due to Redux form.record-form missing the following values: values and initial.

Without step 2. for normal resources that have a list prop - everything works fine.

I listed step 1. because prior to v2.6.something I had the same issue for ALL resources when using createBrowserHistory.

Related code:

Here's how I generate my menu data. I import my resource props and build up a list of categories where each category has an items array describing the menu item.

// `resources` is an array of objects which contain props that are eventually passed to mapped `<Resource />` components.
resources.forEach(res => {
  const cat = categoriesByName[res.category] || noCategory;
  const {
    category,
    icon = DefaultItemIcon,
    name,
    options: { label } = {},
    list,
    create,
    editId = 1,
  } = res;
  cat.items.push({
    category,
    icon,
    label: !label ? toProperCase(name) : label,
    name,
    // If there is a list, link to that.
    // Otherwise link to create or edit with a default id of 1.
    url: list
      ? `/${name}`
      : create
      ? `/${name}/create`
      : `/${name}/${encodeURIComponent(editId)}`,
  });
});

Other information:

I followed the advice in #2671

I'm going to start looking for a workaround right now. If I find one, I'll list it here.

Workarounds:

  • Just add a dummy list prop to every mapped <Resource /> and for generating custom Resource-menu items, use a wholly different non-Resource prop to indicate whether to link to edit or create.
  • Display a custom toolbar that accepts an editOnly property, which prevents saving unless pristine is truthy. (This still leaves the problem of other issues due to missing Resource list prop. Namely, if you navigate to a list-less Resource twice in a row by clicking the same menu item, form.record-form lists its values in Redux.)
import React from "react";
import { SaveButton, Toolbar } from "react-admin";

class EditorToolbar extends React.PureComponent {
  handleSubmitWithRedirect = redirect => {
    const { handleSubmitWithRedirect, pristine, editOnly = false } = this.props;
    if (pristine && editOnly) {
      return () => undefined;
    }
    return handleSubmitWithRedirect(redirect);
  };
  render() {
    const { editOnly: _editOnly, ...rest } = this.props;
    return (
      <Toolbar {...rest}>
        <SaveButton handleSubmitWithRedirect={this.handleSubmitWithRedirect} />
      </Toolbar>
    );
  }
}

Environment

  • React-admin version: 2.7.0

Most helpful comment

Actually, this problem was solved not by the workaround listed but by changing redirect="edit" to redirect={false} when instantiating a SimpleForm or TabbedForm inside of an Edit component.

All 3 comments

Turns out that navigating to one of those resources edit pages, if you're already there, causes the form to get blanked out as well...

The top workaround will fix all my problems and since this is a highly customized situation, I will just close this issue. Thanks!!

Actually, this problem was solved not by the workaround listed but by changing redirect="edit" to redirect={false} when instantiating a SimpleForm or TabbedForm inside of an Edit component.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

nicgirault picture nicgirault  路  3Comments

rkyrychuk picture rkyrychuk  路  3Comments

mbj36 picture mbj36  路  3Comments

aserrallerios picture aserrallerios  路  3Comments

marknelissen picture marknelissen  路  3Comments