From 4758795c920e5ce3368f1932ba47a9442ec7c3a0 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 15 Oct 2026 10:34:00 -0700 Subject: [PATCH 1/4] fix(jsonforms): show required asterisk and errors on ArrayControl Array fields with required or minItems had no red asterisk and ignored validation errors, so empty required lists failed silently in the UI. Co-authored-by: Cursor --- .../src/renderers/ArrayControl.test.tsx | 42 ++++++++++++++++++- .../src/renderers/ArrayControl.tsx | 24 ++++++++++- 2 files changed, 63 insertions(+), 3 deletions(-) diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx index 16d59b0..48dcd59 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx @@ -13,7 +13,10 @@ const itemsSchema: JsonSchema = { properties: { name: { type: 'string' } }, } -function renderArray(options?: ControlElement['options']) { +function renderArray( + options?: ControlElement['options'], + overrides: Partial = {}, +) { const props = { data: [{ name: 'a' }, { name: 'b' }], path: 'items', @@ -24,6 +27,9 @@ function renderArray(options?: ControlElement['options']) { addItem: () => () => undefined, removeItems: () => () => undefined, rootSchema: {}, + required: false, + errors: '', + ...overrides, } as unknown as ArrayControlProps return renderToStaticMarkup() } @@ -43,3 +49,37 @@ describe('ArrayControl itemLabel', () => { expect(html).not.toContain('Container 1') }) }) + +describe('ArrayControl required and errors', () => { + it('shows a red asterisk when required', () => { + const html = renderArray(undefined, { + required: true, + schema: { type: 'array', title: 'Commodities List', items: itemsSchema }, + }) + expect(html).toContain('Commodities List') + expect(html).toContain('*') + }) + + it('shows a red asterisk when minItems is at least 1', () => { + const html = renderArray(undefined, { + schema: itemsSchema, + arraySchema: { type: 'array', title: 'Commodities List', minItems: 1, items: itemsSchema }, + }) + expect(html).toContain('*') + }) + + it('renders options.errorMessage when the control has errors', () => { + const message = + 'At least one commodity must be added before submitting the Phytosanitary Certificate application' + const html = renderArray( + { errorMessage: message }, + { + data: [], + errors: 'is a required property', + schema: itemsSchema, + arraySchema: { type: 'array', title: 'Commodities List', minItems: 1, items: itemsSchema }, + }, + ) + expect(html).toContain(message) + }) +}) diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx index 3be921c..b71a9e2 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx @@ -3,6 +3,7 @@ import { withJsonFormsArrayControlProps, JsonFormsDispatch, useJsonForms } from import { useRef, type RefObject } from 'react' import { stampRowTemplates } from '../utils/sequence' import type { SequenceCounters } from '../utils/sequence' +import { getErrorMessage } from '../utils/error' import { Card, Button, Flex, Text, Box } from '@radix-ui/themes' import { PlusIcon, TrashIcon } from '@radix-ui/react-icons' @@ -56,6 +57,8 @@ export const ArrayControl = ({ removeItems, rootSchema, arraySchema, + required = false, + errors = '', }: ArrayControlProps) => { // Numbers already handed out to this array's numbered `x-template` fields. // A ref, not state: it must survive a row being removed, or the next row @@ -81,10 +84,21 @@ export const ArrayControl = ({ const items = Array.isArray(data) ? data : [] const title = actualArraySchema.title || 'Array Items' - const options = (uischema.options ?? {}) as { addable?: boolean; removable?: boolean; itemLabel?: string } + const options = (uischema.options ?? {}) as { + addable?: boolean + removable?: boolean + itemLabel?: string + errorMessage?: string + } const canAdd = enabled && options.addable !== false const canRemove = enabled && options.removable !== false const itemLabel = options.itemLabel || 'Item' + const showRequired = + required || (typeof actualArraySchema.minItems === 'number' && actualArraySchema.minItems >= 1) + const isValid = !errors + const displayError = !isValid + ? options.errorMessage || getErrorMessage(errors, title) + : '' const handleRemoveItem = (indexToRemove: number) => { if (removeItems) { @@ -97,7 +111,7 @@ export const ArrayControl = ({ - {title} + {title} {showRequired && *} {items.length === 0 && ( @@ -108,6 +122,12 @@ export const ArrayControl = ({ )} + {!isValid && ( + + {displayError} + + )} + {items.map((_item, index) => { const childPath = `${path}.${index}` return ( From 870db1d30e65c1d1e79ba1b3e8047b4e9a4127e8 Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 15 Oct 2026 10:41:40 -0700 Subject: [PATCH 2/4] fix(jsonforms): loosen ArrayControl test overrides for JsonSchema7 Partial type-checked draft-04 JsonSchema fixtures against JsonSchema7 and failed CI type-check. Co-authored-by: Cursor --- .../src/renderers/ArrayControl.test.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx index 48dcd59..3c1cc9a 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx @@ -13,10 +13,9 @@ const itemsSchema: JsonSchema = { properties: { name: { type: 'string' } }, } -function renderArray( - options?: ControlElement['options'], - overrides: Partial = {}, -) { +function renderArray(options?: ControlElement['options'], overrides: Record = {}) { + // Cast once at the boundary: JsonSchema includes draft-04 shapes that are not + // assignable to ArrayControlProps' JsonSchema7 fields (e.g. exclusiveMaximum). const props = { data: [{ name: 'a' }, { name: 'b' }], path: 'items', From eb7b8f7bae41036982f6b8b1793282783d201f2b Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 15 Oct 2026 10:43:28 -0700 Subject: [PATCH 3/4] style(jsonforms): apply Prettier to ArrayControl required changes Co-authored-by: Cursor --- .../src/renderers/ArrayControl.test.tsx | 3 +-- .../jsonforms-renderers/src/renderers/ArrayControl.tsx | 7 ++----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx index 3c1cc9a..f9fcf9d 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx @@ -68,8 +68,7 @@ describe('ArrayControl required and errors', () => { }) it('renders options.errorMessage when the control has errors', () => { - const message = - 'At least one commodity must be added before submitting the Phytosanitary Certificate application' + const message = 'At least one commodity must be added before submitting the Phytosanitary Certificate application' const html = renderArray( { errorMessage: message }, { diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx index b71a9e2..1501de6 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx @@ -93,12 +93,9 @@ export const ArrayControl = ({ const canAdd = enabled && options.addable !== false const canRemove = enabled && options.removable !== false const itemLabel = options.itemLabel || 'Item' - const showRequired = - required || (typeof actualArraySchema.minItems === 'number' && actualArraySchema.minItems >= 1) + const showRequired = required || (typeof actualArraySchema.minItems === 'number' && actualArraySchema.minItems >= 1) const isValid = !errors - const displayError = !isValid - ? options.errorMessage || getErrorMessage(errors, title) - : '' + const displayError = !isValid ? options.errorMessage || getErrorMessage(errors, title) : '' const handleRemoveItem = (indexToRemove: number) => { if (removeItems) { From 2c5315cf5b34323dcb4fb97bbe0c932a66d3d10d Mon Sep 17 00:00:00 2001 From: Your Name Date: Thu, 15 Oct 2026 23:00:59 -0700 Subject: [PATCH 4/4] fix(jsonforms-renderers): wire ArrayControl to useIsRequired Use the #112 hook for conditional required, keep the separate minItems asterisk rule, limit options.errorMessage to empty arrays, and expose both in the array playground fixture. Co-authored-by: Cursor --- packages/jsonforms-renderers/dev/fixtures.ts | 14 +++++++-- .../src/renderers/ArrayControl.test.tsx | 29 ++++++++++++++++++- .../src/renderers/ArrayControl.tsx | 14 +++++++-- 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/packages/jsonforms-renderers/dev/fixtures.ts b/packages/jsonforms-renderers/dev/fixtures.ts index ddea32b..44d90fc 100644 --- a/packages/jsonforms-renderers/dev/fixtures.ts +++ b/packages/jsonforms-renderers/dev/fixtures.ts @@ -1231,7 +1231,9 @@ export const fixtures: Fixture[] = [ properties: { items: { type: 'array', - description: 'List of line items', + title: 'Line Items', + description: 'List of line items; minItems 1 shows a required asterisk', + minItems: 1, items: { type: 'object', properties: { @@ -1245,7 +1247,15 @@ export const fixtures: Fixture[] = [ }, uischema: { type: 'VerticalLayout', - elements: [{ type: 'Control', scope: '#/properties/items' }], + elements: [ + { + type: 'Control', + scope: '#/properties/items', + options: { + errorMessage: 'Add at least one line item before submitting.', + }, + }, + ], } as UISchemaElement, data: { items: [{ description: 'First item', qty: 1 }] }, }, diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx index f9fcf9d..3630be2 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.test.tsx @@ -8,6 +8,12 @@ vi.mock('@jsonforms/react', async (importOriginal) => { return { ...actual, JsonFormsDispatch: () => null } }) +// Unit tests render ArrayControl without a JsonForms provider; pass through +// the static `required` prop so asterisk assertions stay meaningful. +vi.mock('../hooks/useIsRequired', () => ({ + useIsRequired: (_path: string, staticRequired = false) => staticRequired, +})) + const itemsSchema: JsonSchema = { type: 'object', properties: { name: { type: 'string' } }, @@ -67,7 +73,7 @@ describe('ArrayControl required and errors', () => { expect(html).toContain('*') }) - it('renders options.errorMessage when the control has errors', () => { + it('renders options.errorMessage when the array is empty and has errors', () => { const message = 'At least one commodity must be added before submitting the Phytosanitary Certificate application' const html = renderArray( { errorMessage: message }, @@ -80,4 +86,25 @@ describe('ArrayControl required and errors', () => { ) expect(html).toContain(message) }) + + it('does not use options.errorMessage for non-empty array errors', () => { + const message = 'At least one commodity must be added before submitting the Phytosanitary Certificate application' + const html = renderArray( + { errorMessage: message }, + { + data: [{ name: 'a' }, { name: 'b' }, { name: 'c' }], + errors: 'must NOT have more than 2 items', + schema: itemsSchema, + arraySchema: { + type: 'array', + title: 'Commodities List', + minItems: 1, + maxItems: 2, + items: itemsSchema, + }, + }, + ) + expect(html).not.toContain(message) + expect(html).toContain('must NOT have more than 2 items') + }) }) diff --git a/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx b/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx index 1501de6..b13c3f7 100644 --- a/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx +++ b/packages/jsonforms-renderers/src/renderers/ArrayControl.tsx @@ -4,6 +4,7 @@ import { useRef, type RefObject } from 'react' import { stampRowTemplates } from '../utils/sequence' import type { SequenceCounters } from '../utils/sequence' import { getErrorMessage } from '../utils/error' +import { useIsRequired } from '../hooks/useIsRequired' import { Card, Button, Flex, Text, Box } from '@radix-ui/themes' import { PlusIcon, TrashIcon } from '@radix-ui/react-icons' @@ -67,6 +68,9 @@ export const ArrayControl = ({ // row. It does NOT survive this control unmounting — see SequenceCounters // in utils/sequence.ts for what that costs and what covers it. const sequences = useRef({}) + // Above the early returns: hooks must run unconditionally. Also covers + // arrays that become required through allOf/if/then (#112). + const conditionallyRequired = useIsRequired(path, required, visible) // If `arraySchema` is present, `schema` is already our `itemsSchema`, else fall back to `schema.items` const itemsSchema = arraySchema ? schema : schema.items @@ -93,9 +97,15 @@ export const ArrayControl = ({ const canAdd = enabled && options.addable !== false const canRemove = enabled && options.removable !== false const itemLabel = options.itemLabel || 'Item' - const showRequired = required || (typeof actualArraySchema.minItems === 'number' && actualArraySchema.minItems >= 1) + // minItems >= 1 is separate from schema `required`: an empty array fails + // with a minItems error, not a required error, so useIsRequired alone + // would miss it. + const showRequired = + conditionallyRequired || (typeof actualArraySchema.minItems === 'number' && actualArraySchema.minItems >= 1) const isValid = !errors - const displayError = !isValid ? options.errorMessage || getErrorMessage(errors, title) : '' + // options.errorMessage is for the empty-array case (required / minItems). + // Other array errors (e.g. maxItems) keep AJV's message. + const displayError = !isValid ? (items.length === 0 && options.errorMessage) || getErrorMessage(errors, title) : '' const handleRemoveItem = (indexToRemove: number) => { if (removeItems) {