React-admin: Row expanded to edit fail - TypeError: f.pauseValidation is not a function

[chungchi300]

What you were expecting:
Expanded and show the edit form

What happened instead:
exception throw TypeError: f.pauseValidation is not a function

Steps to reproduce:
Click expanded in the row of the data grid

Related code:

function QEdit(props) {
  return (
    <Edit {...props}>
      <SimpleForm form={`estimation_edit_33`}>
        <TextInput source="status" />
      </SimpleForm>
    </Edit>
  );
}
export function OList(props) {
  return (
    <List pagination={<GlobalPagination />} {...props} filters={<OFilter />}>
      <Datagrid rowClick="expand" expand={<QEdit />}>

Environment

• React-admin version: 3.2.2
• Last version that did not exhibit the issue (if applicable):2.9.6
• React version:16.9.0
• Browser: Chrome
• Stack trace (in case of a JS error):

react-final-form.es.js:175 Uncaught TypeError: f.pauseValidation is not a function
    at react-final-form.es.js:175
    at useConstant (react-final-form.es.js:67)
    at ReactFinalForm (react-final-form.es.js:172)
    at renderWithHooks (react-dom.development.js:16317)
    at mountIndeterminateComponent (react-dom.development.js:18800)
    at beginWork$1 (react-dom.development.js:20149)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at beginWork$$1 (react-dom.development.js:25768)
    at performUnitOfWork (react-dom.development.js:24682)
    at workLoopSync (react-dom.development.js:24658)
    at performSyncWorkOnRoot (react-dom.development.js:24247)
    at react-dom.development.js:12285
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12280)
    at flushSyncCallbackQueue (react-dom.development.js:12268)
    at discreteUpdates$1 (react-dom.development.js:24401)
    at discreteUpdates (react-dom.development.js:1439)
    at dispatchDiscreteEvent (react-dom.development.js:5914)

[fzaninotto]

Reproduced in the simple example, got to users list, expand one row, and...

[ewanmellor]

The issue is:

• The SimpleForm.form prop is passed through SimpleForm -> FormWithRedirect -> Form aka ReactFinalForm from react-final-form.
• Since react-final-form@c3912b0e, ReactFinalForm.form is expected to be an implementer of FormApi from final-form.

Therefore, the example above is broken, because it's passing a string (intended to be the form ID) but this needs to be a FormApi instance.

This also shows up in the documented example at https://marmelab.com/react-admin/List.html. Search for the comment "The form must have a name dependent on the record, because by default all forms have the same name".

I don't know what the intended APIs are at all the layers, so I don't know where the form ID vs FormApi confusion has happened. I was able to work around this as below, but I don't know if this is going to work properly once I have multiple forms on the page.

import { createForm } from 'final-form'

        <SimpleForm
            form={createForm({onSubmit: () => {}})}
        >
...
        </SimpleForm>

[ewanmellor]

Comparing https://marmelab.com/react-admin/CreateEdit.html#the-simpleform-component with https://marmelab.com/react-admin/doc/2.9/CreateEdit.html#the-simpleform-component, it looks like SimpleForm.form was removed / redefined. I guess that's the source of this confusion.

[chungchi300]

I learn how to use it this way at https://marmelab.com/blog/2019/01/09/react-admin-2-6.html and I have deployed a working application in 2.6 to production. How can we do an equivalent staff in this version?

[dobryanskyy]

I have managed to(at least partially) make it working by completely removing form prop. The issue than is that when you try updating one record during undoable delay after updating another record - it does not apply the update. undoable={false} helps here. However, this is still just a workaround

[chungchi300]

I have managed to(at least partially) make it working by completely removing form prop. The issue than is that when you try updating one record during undoable delay after updating another record - it does not apply the update. undoable={false} helps here. However, this is still just a workaround

Do you have sample code snippets for your fix?

[dobryanskyy]

Sure. This works

import React from 'react'
import {List, Edit as RaEdit, Datagrid, TextField, SimpleForm, TextInput, NumberInput} from 'react-admin'

const Edit = props => (
  <RaEdit {...props} title=" " undoable={false}>
    <SimpleForm>
      <TextInput source="comment" />
      <NumberInput source="value" />
    </SimpleForm>
  </RaEdit>
)

const ItemList = props => (
  <List {...props} bulkActionButtons={false}>
    <Datagrid sort={{field: 'name'}} expand={<Edit />}>
      <TextField source="value" />
      <TextField source="comment" />
    </Datagrid>
  </List>
)

[ravi-pandit14]

@ewanmellor
I am facing this issue after follow your code.

FormWithRedirect.js:86 Uncaught TypeError: onSave.current is not a function
at submit (FormWithRedirect.js:86)
at Object.submit (final-form.es.js:1296)
at handleSubmit (react-final-form.es.js:264)
at FormWithRedirect.js:121
at handleClick (SaveButton.js:57)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21902)
at batchedEventUpdates (react-dom.development.js:1060)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11061)
at discreteUpdates$1 (react-dom.development.js:21918)
at discreteUpdates (react-dom.development.js:1071)

[ravi-pandit14]

I have resolved issue, Working in react-admin V 3.3.1 and following code.

<SimpleForm initialValues={this.props.record} toolbar={<EditFormToolbar />}
                save={this.handleSubmit}
                redirect={'show'}
            >
...
</SimpleForm>