Custom filter form does'nt work

[fchasles]

What you were expecting:

I would like to create a custom filter form submitted by a button.

What happened instead:

I took the example in the doc, made quick adaptation but I have an error when I put any of react-admin input field in the form.
https://marmelab.com/react-admin/FilteringTutorial.html#custom-filter-form

Related code:

https://codesandbox.io/s/custom-filter-form-4b5of1

Error in the console :

The above error occurred in the <TextInput> component:

TextInput@https://4b5of1.sse.codesandbox.io/index.bundle.js:104832:21
span
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@https://4b5of1.sse.codesandbox.io/index.bundle.js:612:66
Box@https://4b5of1.sse.codesandbox.io/index.bundle.js:41027:72
div
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@https://4b5of1.sse.codesandbox.io/index.bundle.js:612:66
Box@https://4b5of1.sse.codesandbox.io/index.bundle.js:41027:72
form
FilterForm@https://4b5of1.sse.codesandbox.io/index.bundle.js:158499:101
div
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@https://4b5of1.sse.codesandbox.io/index.bundle.js:612:66
Toolbar@https://4b5of1.sse.codesandbox.io/index.bundle.js:35914:82
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@https://4b5of1.sse.codesandbox.io/index.bundle.js:612:66
./node_modules/ra-ui-materialui/dist/esm/list/ListToolbar.js/ListToolbar<@https://4b5of1.sse.codesandbox.io/index.bundle.js:108397:19
div
div
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@https://4b5of1.sse.codesandbox.io/index.bundle.js:612:66
ListView@https://4b5of1.sse.codesandbox.io/index.bundle.js:108512:14
ListContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:81592:17
ResourceContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:84503:20
ListBase@https://4b5of1.sse.codesandbox.io/index.bundle.js:81439:20
List@https://4b5of1.sse.codesandbox.io/index.bundle.js:108169:20
PostList@https://4b5of1.sse.codesandbox.io/index.bundle.js:158996:79
RenderedRoute@https://4b5of1.sse.codesandbox.io/index.bundle.js:147164:7
Routes@https://4b5of1.sse.codesandbox.io/index.bundle.js:147595:7
ResourceContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:84503:20
Resource@https://4b5of1.sse.codesandbox.io/index.bundle.js:84407:18
RenderedRoute@https://4b5of1.sse.codesandbox.io/index.bundle.js:147164:7
Routes@https://4b5of1.sse.codesandbox.io/index.bundle.js:147595:7
ErrorBoundary@https://4b5of1.sse.codesandbox.io/index.bundle.js:139108:37
div
main
div
div
./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js/withEmotionCache/<@https://4b5of1.sse.codesandbox.io/index.bundle.js:612:66
Layout@https://4b5of1.sse.codesandbox.io/index.bundle.js:106015:14
__WEBPACK_DEFAULT_EXPORT__
div
RenderedRoute@https://4b5of1.sse.codesandbox.io/index.bundle.js:147164:7
Routes@https://4b5of1.sse.codesandbox.io/index.bundle.js:147595:7
CoreAdminRoutes@https://4b5of1.sse.codesandbox.io/index.bundle.js:84268:79
RenderedRoute@https://4b5of1.sse.codesandbox.io/index.bundle.js:147164:7
Routes@https://4b5of1.sse.codesandbox.io/index.bundle.js:147595:7
CoreAdminUI@https://4b5of1.sse.codesandbox.io/index.bundle.js:84338:14
AdminUI@https://4b5of1.sse.codesandbox.io/index.bundle.js:94709:24
InnerThemeProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:40257:70
ThemeProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:39960:7
ThemeProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:40279:7
ThemeProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:107301:20
ResourceDefinitionContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:84576:14
NotificationContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:90898:20
I18nContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:90341:14
Router@https://4b5of1.sse.codesandbox.io/index.bundle.js:147531:7
HistoryRouter@https://4b5of1.sse.codesandbox.io/index.bundle.js:91144:20
InternalRouter@https://4b5of1.sse.codesandbox.io/index.bundle.js:91064:20
BasenameContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:91116:20
AdminRouter@https://4b5of1.sse.codesandbox.io/index.bundle.js:91053:19
QueryClientProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:144827:16
StoreContextProvider@https://4b5of1.sse.codesandbox.io/index.bundle.js:91461:17
CoreAdminContext@https://4b5of1.sse.codesandbox.io/index.bundle.js:84207:24
AdminContext@https://4b5of1.sse.codesandbox.io/index.bundle.js:94654:14
Admin@https://4b5of1.sse.codesandbox.io/index.bundle.js:111483:24

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Environment

• React-admin version: 4.3.1
• React version: 17.0.1
• Browser: Chrome/Firefox

[ghost]

I am facing this exact issue I have created a repo with minimal code to reproduce it https://github.com/hichamtaoufikallah/react-admin-custom-filter-issue

[fzaninotto]

Right, the documentation for custom filter forms is missing the FormContextProvider. Marking this as a dcumentation bug.

[ghost]

@fzaninotto please can you provide any fast hint on how to fix this error?
By the way according to the doc the FormContextProvider has been removed. am I missing something?

[ghost]

I just followed the changes in the linked PR, and I confirm that it works. Thanks @WiXSL @fzaninotto

[fchasles]

Thanks for the quick support! 👍🏻🚀

[btbenedi]

Thanks @WiXSL, this was driving me nuts today trying to figure out why my code wasn't working.