marmelab / marmelab/react-admin
Form inputs do not display associated list of errors
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 26.9k
- Forks
- 5.5k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 19
Description
What you were expecting:
I would see two error texts below the input concerned by the error
What happened instead:
The input is actually red, showing there is an error, but not displaying the text provided by the API
Steps to reproduce:
- Go to this sandbox: https://codesandbox.io/s/broken-voice-dd8zth
- On the Tag page, try creating a tag (with french and english labels). Save.
- You should see the french error displaying correctly on the field while the english errors are not displaying
Related code:
Sanbox https://codesandbox.io/s/broken-voice-dd8zth?file=/src/dataProvider.tsx
I created a custom useSubmit hook whose purpose is to display errors associated to the fields concerned by the error
Other information:
From my investigation, the bug comes from the way setSubmissionErrors sets the error.
I'll try creating a merge request and adding a test to handle lists of errors associated to a field
Environment
- React-admin version: 4.4.3
- Last version that did not exhibit the issue (if applicable): N/A
- React version: 17
- Browser: Google Chrome: Version 106.0.5249.119 (Build officiel) (x86_64)
- Stack trace (in case of a JS error): N/A
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue in the linked CodeSandbox, starting with src/dataProvider.tsx and the custom useSubmit hook. Then inspect packages/ra-core/src/form/setSubmissionErrors.ts and add the regression test mentioned in the issue. Done means multiple API errors for one field are displayed, including the French and English errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100