React-jsonschema-form: Customize id prefix of root_ from rendered DOM

[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

The bug is that the generated DOM contains ids, which are not guaranteed to be unique, if for example I have two forms on the same page.
I think we should not use ids at all in the generated DOM, but probably if we want to identify fields, we could use data attributes such as :

<input data-rjsf={id}/>

Actual behavior

The generated DOM is full of ids.

See this example :

  <fieldset>
    <legend id="root__title">A registration form</legend>
    <p id="root__description" class="field-description">A simple
    form example.</p>
    <div class="form-group field field-string">
      <label class="control-label" for="root_firstName">First
      name*</label><input type="text" class="form-control" value=
      "Chuck" id="root_firstName" label="First name" required=""
      placeholder="">
    </div>
    <div class="form-group field field-string">
      <label class="control-label" for="root_lastName">Last
      name*</label><input type="text" class="form-control" value=
      "Norris" id="root_lastName" label="Last name" required=""
      placeholder="">
    </div>
    <div class="form-group field field-integer">
      <label class="control-label" for="root_age">Age of
      person</label>
      <p id="root_age__description" class="field-description">
      (earthian year)</p><input type="number" class="form-control"
      value="75" id="root_age" label="Age" placeholder="">
    </div>
    <div class="form-group field field-string">
      <label class="control-label" for="root_bio">Bio</label>
      <textarea id="root_bio" class="form-control" placeholder=
      "">Roundhouse kicking asses since 1940</textarea>
    </div>
    <div class="form-group field field-string">
      <label class="control-label" for=
      "root_password">Password</label><input type="password" class=
      "form-control" value="noneed" id="root_password" label=
      "Password" placeholder="">
      <p class="help-block">Hint: Make it strong!</p>
    </div>
    <div class="form-group field field-string">
      <label class="control-label" for=
      "root_telephone">Telephone</label><input type="tel" class=
      "form-control" value="" id="root_telephone" label="Telephone"
      placeholder="">
    </div>
  </fieldset>

Version

1.0.0

[Natim]

I think the purpose of having ids everywhere is to allow you to add specific css rules if needed. Why would you think it is an issue to have them?

[edi9999]

Actually, I think we need ids to link label with input.

The problem with these ids is that they can be duplicated.

[Natim]

The problem with these ids is that they can be duplicated.

Yes good catch.

[edi9999]

My suggestion was to use data-rjsf={id} instead of id={id}, which you can also select with css rules with :

[data-rjsf="root_password"]

This doesn't pollute the "global" id namespace.

[Natim]

Would this work for label for attribute? What about rjsf_root_password instead?

• It stays an ID
• It adds a namespace

[edi9999]

Yes, I think it would be good to have rjsf_root_password instead,

maybe to be able to do this in the current version without losing backwards compatibility, the "prefix" for id could be an option :

<Form
   uiSchema={uiSchema}
   idPrefix="rjsf_"
   ...
>

And idPrefix would be by default "" (empty string)

[Natim]

@edi9999 do you feel like starting a Pull-Request to start implementing that proposal?

[edi9999]

I will see if I have some time for this, but it is not guaranteed.