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

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)

[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

[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>