Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Improve support for remix by adding name on all input elements #3145

Merged
merged 6 commits into from
Sep 25, 2022

Conversation

heath-freenome
Copy link
Member

@heath-freenome heath-freenome commented Sep 23, 2022

Reasons for making this change

Added name to elements that were missing it to better support remix.
Also, fixes #2355, #2138 by improving the ids we use for checkboxes and radio widgets

  • Added the name prop to the any widget that was missing it to support remix
    • For Radio and Checkbox group widgets, made the name={id} for all elements since they are logically part of the same input even though the ids have different values since they need to be unique on the page
      • Also made them use the same format for ids and keys, removed any unnecessary casting and added non-array protection
    • For bootstrap-4, simplified the CheckboxWidgets code to eliminate a ternary in favor of a simple inline={inline} property since all the rest of the props were the same
      • In the process removed the generation of another level of Form that would break the ui in the browser
    • For fluent-ui, some components were missing id and others did not support name
      • Also fixed DateTimeWidget which was still using the TextInput-from-widgets pattern instead of BaseInputTemplate-from-registry pattern
    • For semantic-ui, some components had unnecessary key props, and name was set to name which may not be unique, so switched them to id
  • Ran npm run test:update to update the snapshots with the new names and ids
  • Updated the CHANGELOG.md file accordingly, moving a comment from beta.9 to beta.10

Checklist

  • I'm updating documentation
  • I'm adding or updating code
    • I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
    • I've updated docs if needed
    • I've updated the changelog with a description of the PR
  • I'm adding a new feature
    • I've updated the playground with an example use of the feature

- Added the `name` prop to the any widget that was missing it to support remix
  - For Radio and Checkbox groups, made the `name={id}` for all elements since they are logically part of the same input even though the `id`s have different values since they need to be unique on the page
  - For bootstrap-4, simplified the `CheckboxWidgets` code to eliminate a ternary in favor of a simple `inline={inline}` property since all the rest of the props were the same
  - For fluent-ui, some components were missing `id` and others did not support `name`
  - For semantic-ui, some components had unnecessary `key` props, and `name` was set to `name` which may not be unique, so switched them to `id`
- Ran `npm run test:update` to update the snapshots with the new `name`s
- Updated the `CHANGELOG.md` file accordingly, moving a comment from `beta.9` to `beta.10`
…for Radio elements

- Reverted removal of `key` from `semantic-ui`
…Widgets` across all themes use the same pattern

- Also removed unnecessary casting and added protection against non-arrays
- Updated the snapshots accordingly
@heath-freenome heath-freenome merged commit 1c193f9 into rjsf-team:main Sep 25, 2022
@heath-freenome heath-freenome deleted the reimplement-2710 branch September 25, 2022 17:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[bootstrap-4] [CheckboxesWidget] - <form> cannot appear as a descendant of <form>
2 participants