React-jsonschema-form: 3 Empty divs are created

[edi9999]

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

When using rjsf, multiple empty divs seem to be created that are not useful

Steps to Reproduce

1. Goto https://mozilla-services.github.io/react-jsonschema-form/
2. Example "simple" (the default one)
3. If you inspect the first input, you see the following

3 empty divs seem to be created.

Expected behavior

No empty divs should be created

Actual behavior

3 empty divs are created

Version

1.0.0

[edi9999]

This bug seem to have been introduced in https://github.com/mozilla-services/react-jsonschema-form/pull/312 to support older versions of React (versions that are strictly before 0.15).

However, React 0.14 is a dead branch anyway, the latest 0.14.x release was made on 29th March 2016, soon it will be two years from now : https://github.com/facebook/react/releases/tag/v0.14.8

I think we should be returning null now again.

[edi9999]

They are not a problem in themselves, it is just that I find that they make the generated DOM a little bit harder to debug, like useless logs that pollute when you try to do something.

[Jonjoe]

+1 on this. Loving this lib but as someone who is a stickler for attention to detail the rendered html hurts my soul.

[karrakis]

This is a problem for me because it pretty much removes the ability to use flex styles. Things like "justify-content: space-between" take the extra divs into consideration and you get all kinds of weird behaviors.

(edit: I "resolved" this by doing something super-hacky, I apply "position: absolute" to all empty divs on the form, which apparently removes them from the flex calculations)

[gr8pathik]

I can solve this issue if you want to drop the support of React pre-0.15.

Assign this bug to me and I will change the null where ever we are returning empty </div> and create the pull request.

[epicfaace]

@gr8pathik I'm not able to assign it to you, but please feel free to work on this bug and create a PR!

[gr8pathik]

@epicfaace I have started working on it. But when I cloned the repo and did the npm install and ran the test npm test. The test is failing for some reason. Do you know the reason why the test is failing? (Check attached image)

[epicfaace]

@gr8pathik what version of node do you have? I'm using 8.12.0

[gr8pathik]

@epicfaace I have node v11.10.1 version.

[edi9999]

It is possible that the tests fail on v11, I have seen this on other projects as well I think.

With v8 it should work imo

(oops didn't mean to close)

[gr8pathik]

@edi9999 @epicfaace I have downgraded the node version to v10.15.3 and all the test are passed.