Submit button classname adds a class instead of overriding it

SomMeri commented 1 year ago

Prerequisites

[X] I have searched the existing issues
[X] I understand that providing a SSCCE example is tremendously useful to the maintainers.
[X] I have read the documentation
[X] Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

bootstrap-4

Version

5.7.3

Current Behavior

The ui:submitButtonOptions.className field is adding classes to submit button instead of rewriting them.

This is my UiSchema:

{
  "ui:submitButtonOptions": {
    "props": {
      "disabled": false,
      "className": "btn btn-primary"
    },
    "norender": false,
    "submitText": "Save"
  }
}

This is how the button renders:

<button type="submit" class="btn btn-info btn btn-primary">Save</button>

Sharable rjsf-team.github.io/react-jsonschema-form link

This is how it renders for me:

Expected Behavior

I would expect it to render like this:

<button type="submit" class="btn btn-primary">Save</button>

Steps To Reproduce

Just use following UiSchema:

{
  "ui:submitButtonOptions": {
    "props": {
      "disabled": false,
      "className": "btn btn-primary"
    },
    "norender": false,
    "submitText": "Save"
  }
}

Environment

- OS: Windows 11
- Node: v20.1.0
- npm:8.12.1

Anything else?

I have seen this closed issue: https://github.com/rjsf-team/react-jsonschema-form/issues/3480

It looks to be very similar, but the conclusion there was that old versions of libraries were used and then issue went away. However I have the issue with new versions and on sharable playground, so I think it is something real this time.

heath-freenome commented 1 year ago

@SomMeri In the default SubmitButton template, the classNames are added to the end of the list of classes. You can use the css. Your custom class, being the last one in the list should override any styling from the default ones.

If you need a different implementation of things, you can provide your own submit button by overriding the templates.ButtonTemplate.SubmitButton

stale[bot] commented 3 weeks 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.

rjsf-team / react-jsonschema-form