Repository: mozilla-services/react-jsonschema-form
Pull request #1345 (2019-07-05 15:25:50)

Allows for a custom tagName to be used in place of "form"
### Reasons for making this change

Sometimes we need a way to nest the RJSF components so that we can utilise the rendering capabilities within our components. For example, when rendering a custom `Array<Object>` component, the child properties can be rendered in a child form.  However doing this will produce invalid html, a nasty error in the console, and possibly cause unforeseen problems across browsers.


### Checklist

* [x] **I'm updating documentation**
  - [x] I've [checked the rendering](https://react-jsonschema-form.readthedocs.io/en/latest/#contributing) of the Markdown text I've added
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated [docs](https://react-jsonschema-form.readthedocs.io/) if needed
* [x] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature


epicfaace: Looks great, thanks! Can you add a test for it?

I'm also wondering if not having a `form` tag will break anything -- nothing comes to mind, but let me know if you think of something.
juliankigwana: I added a test. I cannot think of any obvious other than the default native browser behaviour might not work. But I would imagine that if you were manually changing the `tagName`, then you would be aware of this.
epicfaace: @juliankigwana that makes sense. Can you add that bit as a warning in the documentation? (that the native browser behavior might not work)
epicfaace: Additionally, the only allowed values for tagName will be valid JSX HTML tags, correct? Can you add a test in which one tries an invalid tagName?
juliankigwana: > Additionally, the only allowed values for tagName will be valid JSX HTML tags, correct? Can you add a test in which one tries an invalid tagName?

<img width="291" alt="Screen Shot 2019-07-08 at 11 09 11" src="https://user-images.githubusercontent.com/1236178/60802743-88cca480-a171-11e9-917e-4e6765ab03ee.png">

I'm not sure we can test for it. Most browsers will render an unknown `banana` tag as a block element. It would be up to the developer to know what is valid HTML. 

I shall update the documentation with the warning and something saying it expects a valid JSX or HTML tag.
juliankigwana: Thanks @epicfaace. I did apply the suggestion, but it's still showing here as changes requested. Do I need to do anything else?
epicfaace: Nope, looks good -- thanks!

Patch:
diff --git a/docs/form-customization.md b/docs/form-customization.md
index 6310c0f1d..8aeb64634 100644
--- a/docs/form-customization.md
+++ b/docs/form-customization.md
@@ -722,3 +722,15 @@ It's possible to disable the whole form by setting the `disabled` prop. The `dis
 ```
 
 If you just want to disable some of the fields, see the [`ui:disabled`](#disabled-fields) parameter in the `uiSchema` directive. 
+
+
+### Changing the tag name
+
+
+It's possible to change the default `form` tag name to a different HTML tag, which can be helpful if you are nesting forms. However, native browser form behaviour, such as submitting when the `Enter` key is pressed, may no longer work.
+
+```jsx
+<Form
+  tagName="div"
+/>
+```
diff --git a/src/components/Form.js b/src/components/Form.js
index dc93a2a60..e7cc867f5 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -285,6 +285,7 @@ export default class Form extends Component {
       id,
       idPrefix,
       className,
+      tagName,
       name,
       method,
       target,
@@ -300,9 +301,10 @@ export default class Form extends Component {
     const { schema, uiSchema, formData, errorSchema, idSchema } = this.state;
     const registry = this.getRegistry();
     const _SchemaField = registry.fields.SchemaField;
+    const FormTag = tagName ? tagName : "form";
 
     return (
-      <form
+      <FormTag
         className={className ? className : "rjsf"}
         id={id}
         name={name}
@@ -342,7 +344,7 @@ export default class Form extends Component {
             </button>
           </div>
         )}
-      </form>
+      </FormTag>
     );
   }
 }
@@ -366,6 +368,7 @@ if (process.env.NODE_ENV !== "production") {
     onSubmit: PropTypes.func,
     id: PropTypes.string,
     className: PropTypes.string,
+    tagName: PropTypes.string,
     name: PropTypes.string,
     method: PropTypes.string,
     target: PropTypes.string,


Test patch:
diff --git a/test/Form_test.js b/test/Form_test.js
index db23e8003..542dae2e6 100644
--- a/test/Form_test.js
+++ b/test/Form_test.js
@@ -2406,4 +2406,12 @@ describe("Form", () => {
       });
     });
   });
+
+  describe("Changing the tagName", () => {
+    it("should render the component using the custom tag name", () => {
+      const tagName = "SPAN";
+      const { node } = createFormComponent({ schema: {}, tagName });
+      expect(node.tagName).eql(tagName);
+    });
+  });
 });