react-jsonschema-form
react-jsonschema-form copied to clipboard
Add name attributes to form elements without specifying a custom widget, ability to do a normal form POST
Prerequisites
- [x] I have read the documentation;
- [x] In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
Description
Thanks to all the maintainers for this comprehensive and extremely customisable plugin. I'm trying to add a name attribute to a form input by specifying it in the schema. This is so that the server can recognise the form elements.
My question is, is there an easy way to do this without adding a custom widget, which is what i'm doing at the moment?
Steps to Reproduce
This is not a bug but I'm providing an example just to showcase my question https://jsfiddle.net/h4jdraov/. In the properties schema related to the title field you can see a name property however this doesn't add the relevant attribute to the form element.
Version
0.49.0
This is a requirement for me, so until this feature (no-js support) is implemented I’ll use a custom implementation instead of this library :(
Hi @ashkanjj, sorry for not responding to your issue for a while. I don't think there's a strong reason why we couldn't add a name field to each field. I'd be happy to review a PR. @mariuslundgard, calling it "no-js support" is a little strange, since the whole form won't work if you don't have JS enabled.
I did a quick test to try and get this working a little while ago, and it's relatively simple. I am also targeting graceful degradation for users without Javascript (server-side rendering makes it possible!), so the biggest question I ran into was how to handle things like array fields.
Yes, it can be challenging because you have to support deleting any entry, as well as inserting new ones in any location, as well as rearranging the order. You can refer to entries in an array using their index, but that is vulnerable to race conditions if two browsers are modifying the same array. Maybe one approach would be to take a hash of the contents of each array entry and use that as the name, so that you could at least match up old entries to new entries? I guess you would need a fair amount of server-side code to manage the different possible requests?
This also would make testing things a bit easier using react-testing-library the way it is suggested here https://testing-library.com/docs/ecosystem-react-select-event. Is there any work on a branch somewhere I could reference? @glasserc I may explore this a bit but I'm guessing it's pretty difficult considering this has been open a while 🤷♂
#1283 added a pathSchema which could be used to assign name attributes to inputs.
It would be helpful if you can point me to any reference to any example of pathSchema?
@eyesmoker it's generated in the toPathSchema function in utils: https://github.com/rjsf-team/react-jsonschema-form/blob/e673a9097e587f28ffe7d82647ff70ba33908bcb/packages/core/src/utils.js#L986
To fix this issue, we would probably need to run toPathSchema and store the pathSchema in the state of the <Form> component, then pass it on to widgets/fields as needed.