[SOLVED] react-admin edit component does not call update function

react-admin edit component does not call update function

I'm working on a react-admin application and having an issue where the update function in my dataProvider is not called when the 'Save' button is clicked under the edit view.

My App.js looks like this:

import React, { useEffect } from 'react';
import { Switch, Route, Redirect, useLocation } from 'react-router-dom';
import { setGlobal, getGlobal } from 'reactn';
import ReactGA from 'react-ga';
import PrivateRoute from './Auth/PrivateRoute';
import UserLayout from './components/user/layout/Layout';
import AuthLayout from './components/auth/Layout';
import defaultGlobalState from './defaultGlobalState';
import portalApiDataProvider from "./providers/portalApiDataProvider";
import {Admin, ListGuesser, EditGuesser, ShowGuesser, Resource, Layout} from "react-admin";
import { UserList, UserEdit, UserShow } from '../src/components/admin/users';
import { AccountList } from "./components/admin/serviceAccounts";
import authProvider from "./providers/authProvider";

ReactGA.initialize(process.env.REACT_APP_GA_KEY);

const jwt = JSON.parse(localStorage.getItem('jwt'));

setGlobal({ ...defaultGlobalState, jwt });

const App = () => {
  const { userId } = getGlobal();

  let location = useLocation();
  useEffect(() => {
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);

  return (
      <Admin dataProvider={portalApiDataProvider} authProvider={authProvider}>
          <Resource name="users" options={{label: 'Customer Profiles'}} list={UserList} show={UserShow} edit={UserEdit}/>
          <Resource name="serviceAccounts" list={AccountList}/>
      </Admin>
  );
};

export default App;

My UserEdit is as follows:

<Edit title={<UserTitle/>} {...props}>
    <SimpleForm>
        <TextInput source="first_name" />
        <TextInput source="last_name" />
        <TextInput source="email" />
        <TextInput source="phone" />
        <TextInput source="default_account_number" />
        <BooleanInput source="validated" format={v => v === 1 ? true : false}/>
    </SimpleForm>
</Edit>

I've seen this issue brought up a couple of times, but without any details on resolution. This link mentions using a Notification component in the Layout (I'm pretty sure I'm using the default layout), or disabling undo (which does work but is not ideal): https://github.com/marmelab/react-admin/issues/3049

This link also discusses a similar issue with reference to a demo project, but I'm not able to find the relevant code: https://github.com/marmelab/react-admin/issues/5082

What am I missing here?

Solution

For some reason, the undoable prop on Edit is causing problem. Set it to false and it will call the update properly. I don't know why, I am using this under a special endpoint as a "sub-app", so might be due to conflicting routers, too tired to find out.