feat: Add dynamic uiSchema support for array items #4675
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Enhances the ArrayField component to support dynamic uiSchema generation through a function-based approach, allowing UI schemas to be conditionally created based on: - Item data content - Item index - Form context This maintains backward compatibility with existing static uiSchema objects while enabling more flexible, context-aware UI rendering for array items. Adds comprehensive documentation with examples showing practical use cases and benefits.
Enhances ArrayField component to properly handle dynamic uiSchema.items functions: - Improves type safety with new ArrayElement utility type - Adds proper function call handling for both normal and fixed arrays - Ensures graceful error handling and fallback to empty object - Correctly passes item data, index and formContext to function - Adds comprehensive test suite for dynamic uiSchema functionality This feature allows for conditional UI rendering based on item data, significantly improving form customization capabilities.
- Clarifies error messages by adding "item at" to provide better context when dynamic uiSchema functions fail - Adds test case for handling errors in dynamic uiSchema functions for fixed arrays - Ensures consistent error handling between regular and fixed array implementations This improves debugging experience for developers using dynamic uiSchema functionality.
Updates the type annotations in ArrayField component to accept undefined as a valid type for itemUiSchema. This preserves backward compatibility by not defaulting to an empty object when uiSchema.items is undefined. Previously, the code always defaulted to an empty object which could cause unexpected behavior when checking for the existence of UI schema.
Modifies the ArrayField component to properly handle undefined uiSchema values instead of converting them to empty objects. This maintains backward compatibility and prevents unnecessary props from being passed to child components. The change: - Only applies truthy results from dynamic uiSchema functions - Preserves undefined values in static object cases - Updates snapshots to reflect the removed empty uiSchema objects This fixes inconsistent behavior when working with conditionally defined UI schemas.
Propagates the idSchema.$id to the Fieldset component in the ArrayFieldTemplate, ensuring consistent and accessible ID attributes in the generated HTML. Updates test snapshots to reflect the new ID values, replacing previously null or auto-generated IDs with consistent "root" identifiers and related ARIA attribute references.
…ractices Expands DYNAMIC_UISCHEMA_EXAMPLES.md with: - Additional examples for falsy return values and fixed arrays - Detailed notes on handling new items and error cases - Performance considerations and optimization techniques - Clarified behavior documentation for dynamic UI schemas Improves developer experience by providing comprehensive guidance for implementing dynamic UI schemas effectively.
|
@chathuraa Looks like your changes are breaking |
- Replaces nanoid with lodash/uniqueId for array item ID generation - Adds prefix "rjsf-array-item-" to generated IDs for better debugging - Adds null/undefined checks for uiSchema in ArrayField and getUiOptions - Adds NX Cloud ID to configuration This change improves robustness when handling undefined UI schemas and provides more consistent ID generation for array items.
- Updates CheckboxWidget _onBlur and _onFocus handlers to use target.checked instead of target.value - Adds tests for getUiOptions when uiSchema is undefined or null - Removes nxCloudId from nx.json configuration
|
Hey @heath-freenome , I have fixed the issue and added a couple of more tests. Cheers, |
|
Daisy UI tests are failing... |
…ckbox value handling Refactors ArrayField by extracting computeItemUiSchema helper method to eliminate duplicate code - Creates a shared private method for computing item UI schema that handles both function and object cases - Used in both regular arrays and fixed arrays rendering paths - Improves error handling for dynamic UI schema functions Fixes CheckboxWidget components in Fluent UI and MUI packages: - Changes onBlur/onFocus handlers to pass the checkbox checked state instead of its value Fixes getDisplayLabel to safely handle undefined uiSchema
Updates all CheckboxWidget implementations to use the actual checked state from the event target in onFocus and onBlur handlers instead of the component's value prop. This ensures callbacks receive the current checkbox state rather than potentially stale values from the component props.
… into feat/dynamic-uischema-array-items
|
hi @heath-freenome , I have fixed this issues |
|
Sorry @chathuraa , we're still seeing failed tests on this PR |
…errors This commit fixes two potential issues: 1. Updates `createComponent` test utility to ensure Form components always receive a validator prop when rerendering, preventing potential test failures 2. Adds null checks for rootSchema in SchemaUtils to prevent errors when schema is undefined or null
|
Hi @nickgros , I have fixed the issue and resubmitted. Cheers, |
|
@chathuraa looks like there are still some typing issue in the build |
…Blur Updates focus and blur event handlers in checkbox widgets across all UI libraries to use the current value state instead of reading from event target. This ensures consistency across implementations and fixes potential issues where the event target might not correctly reflect the current checkbox state.
|
Hi @heath-freenome , I have fixed the build errors. 
Cheers, |
|
@chathuraa And, one last thing, can you update the |
… fields The change includes: - documentation with TypeScript examples - Updated array and uiSchema documentation to reference the new capabilities Closes rjsf-team#4706
… into feat/dynamic-uischema-array-items
Extends the v6.x upgrade guide to document the new feature that allows dynamic UI schema generation for array items. Includes a code example demonstrating the feature and references additional documentation.
… into feat/dynamic-uischema-array-items
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
Co-authored-by: Heath C <[email protected]>
…l UI libraries Fixes the checkbox widget to use current value instead of event target in onFocus/onBlur handlers across all UI libraries: - core - chakra-ui - daisyui - fluentui-rc - mui - primereact - semantic-ui Fixes rjsf-team#4704
heath-freenome
approved these changes
Aug 12, 2025
|
Thank you very much @nickgros & @heath-freenome . |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reasons for making this change
This PR implements dynamic uiSchema support for array items, allowing developers to programmatically generate UI schemas based on array item data, index, and context. This addresses the need for more flexible array rendering when UI requirements vary based on data content.
Key features added:
The implementation allows for use cases like:
Checklist
npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:updateto update snapshots, if needed.