rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
14.1k stars 2.18k forks source link

How do I get a <select> with the correct className? (form-control, not custom-control) #3619

Closed hakunin closed 2 weeks ago

hakunin commented 1 year ago

Prerequisites

What theme are you using?

bootstrap-4

        "@rjsf/bootstrap-4": "^5.6.2",
        "@rjsf/core": "^5.0.0-beta.17",
        "@rjsf/semantic-ui": "^5.0.0-beta.17",
        "@rjsf/utils": "^5.0.0-beta.17",
        "@rjsf/validator-ajv8": "^5.0.0-beta.17",

What is your question?

This looks like a bug / feature.

When I create a select box through AnyOf, the form element does not look correctly, because it does not have the className="form-control" but instead has className="custom-select", which Bootstrap does not know.

For example:

<select
  name="root_extractor" 
  aria-describedby="root_extractor__error root_extractor__description root_extractor__help"
  id="root_extractor"
  class="custom-select" // <---
>
  <option value=""></option>
  <option id="A" value="0">A</option>
  <option id="B" value="1">B</option>
  <option id="C" value="2">C</option>
</select>

This does not seem to happen in the demo/documentation.

Is it a bug? Is there a way to fix this in the meantime?

hakunin commented 1 year ago

As a workaround, I copied the bootstrap css for form-control from here into my project and renamed the class to custom-select.

heath-freenome commented 1 year ago

@hakunin You need to make ALL of the RJSF packages be on the same major/minor versions. Please upgrade to the latest 5.x version and try this again.

That said, the SelectWidget for the bootstrap-4 code has bsPrefix='custom-select' added to the Form.Control in the #3049 PR.

Sounds like it was a bad fix. Would you be willing to create a PR to remove bsPrefix and update the test snapshots and the CHANGELOG.md?

hakunin commented 1 year ago

I can look into it on Monday, but I'm not sure about the background of the previous fix.

stale[bot] commented 1 month ago

This issue has been automatically marked as possibly close because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.

stale[bot] commented 2 weeks ago

This issue was closed because of lack of recent activity. Reopen if you still need assistance.