@evoke-platform/ui-components 1.8.2-testing.0 → 1.9.0-dev.1

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js

@@ -1,5 +1,6 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
+import DOMPurify from 'dompurify';
 import React, { useEffect, useMemo } from 'react';
 import { useResponsive } from '../../../../theme';
 import { useFormContext } from '../../../../theme/hooks';
@@ -17,7 +18,7 @@ import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
-import { docProperties, entryIsVisible, fetchCollectionData, getEntryId, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+import { entryIsVisible, fetchCollectionData, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -42,39 +43,17 @@ export function RecursiveEntryRenderer(props) {
     if (!entryIsVisible(entry, getValues(), instance)) {
         return null;
     }
+    const { isXs, smallerThan } = useResponsive();
+    const isSmallerThanMd = smallerThan('md');
     const apiServices = useApiServices();
     const userAccount = useAuthenticationContext()?.account;
-    const { smallerThan, isXs } = useResponsive();
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues(entryId);
     const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
     const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
-        let def;
-        if (entry.type === 'input') {
-            def = parameters?.find((param) => param.id === entry.parameterId);
-        }
-        else if (entry.type === 'readonlyField') {
-            def = isDocument
-                ? docProperties.find((prop) => prop.id === entry.propertyId)
-                : isAddressProperty(entry.propertyId)
-                    ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
-                    : object?.properties?.find((prop) => prop.id === entry.propertyId);
-        }
-        else if (entry.type === 'inputField') {
-            def = entry.input;
-        }
-        else {
-            return undefined;
-        }
-        if (def?.enum && def.type === 'string') {
-            const cloned = structuredClone(def);
-            // single select must be made to be type choices for label and error handling
-            cloned.type = 'choices';
-            return cloned;
-        }
-        return def;
+        return getFieldDefinition(entry, object, parameters, isDocument);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
     if (associatedObject?.propertyId === entryId)
@@ -85,7 +64,7 @@ export function RecursiveEntryRenderer(props) {
         }
     }, [fieldDefinition, instance]);
     if (entry.type === 'content') {
-        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: entry.html }, sx: {
+        return (React.createElement(Box, { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(entry.html) }, sx: {
                 fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
             } }));
     }
@@ -123,7 +102,8 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'richText') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
-                id: entryId,
+                // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
+                id: entry.uniqueId,
                 value: fieldValue,
                 handleUpdate: (value) => handleChange(entryId, value),
                 format: 'rtf',
@@ -195,7 +175,8 @@ export function RecursiveEntryRenderer(props) {
         }))))));
     }
     else if (entry.type === 'sections') {
-        return smallerThan('md') ? React.createElement(AccordionSections, { entry: entry }) : React.createElement(FormSections, { entry: entry });
+        const filteredEntry = filterEmptySections(entry, getValues(), instance);
+        return filteredEntry ? (isSmallerThanMd ? (React.createElement(AccordionSections, { entry: filteredEntry })) : (React.createElement(FormSections, { entry: filteredEntry }))) : null;
     }
     else if (!fieldDefinition) {
         return (React.createElement(Box, { sx: {

package/dist/published/components/custom/FormV2/components/ValidationFiles/Validation.js

@@ -64,13 +64,13 @@ export const handleValidation = (entries, register, formValues, parameters, inst
             };
         }
         // Min/max number fields
-        if (isNumericValidation(validation) && validation.maximum) {
+        if (isNumericValidation(validation) && typeof validation.maximum === 'number') {
             validationRules.max = {
                 value: validation.maximum,
                 message: errorMsg || `${fieldName} must have a value under ${validation.maximum}`,
             };
         }
-        if (isNumericValidation(validation) && validation.minimum) {
+        if (isNumericValidation(validation) && typeof validation.minimum === 'number') {
             validationRules.min = {
                 value: validation.minimum,
                 message: errorMsg || `${fieldName} must have a value over ${validation.minimum}`,

package/dist/published/components/custom/FormV2/components/types.d.ts

@@ -83,6 +83,11 @@ export type BaseProps = {
 export type ExpandedSection = Section & {
     id: string;
     expanded?: boolean;
+    isNested?: boolean;
+};
+export type ExpandedSections = Omit<Sections, 'sections'> & {
+    sections: ExpandedSection[];
+    id: string;
 };
 export type EntryRendererProps = BaseProps & {
     entry: FormEntry;
@@ -93,7 +98,7 @@ export type EntryRendererProps = BaseProps & {
     };
 };
 export type SectionsProps = {
-    entry: Sections;
+    entry: ExpandedSections;
 };
 export type DocumentData = {
     id: string;
@@ -105,3 +110,6 @@ export type DocumentData = {
     type: string;
     view_permission: string;
 };
+export type RichTextFormEntry = FormEntry & {
+    uniqueId: string;
+};

package/dist/published/components/custom/FormV2/components/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Action, ApiServices, Column, Columns, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { AutocompleteOption } from '../../../core';
@@ -81,8 +81,24 @@ export declare const deleteDocuments: (submittedFields: FieldValues, requestSucc
  *
  * Returns the cleaned submission ready for submitting.
  */
-export declare function formatSubmission(submission: FieldValues, apiServices?: ApiServices, objectId?: string, instanceId?: string, setSnackbarError?: React.Dispatch<React.SetStateAction<{
+export declare function formatSubmission(submission: FieldValues, apiServices?: ApiServices, objectId?: string, instanceId?: string, form?: EvokeForm, setSnackbarError?: React.Dispatch<React.SetStateAction<{
     showAlert: boolean;
     message?: string;
     isError: boolean;
 }>>): Promise<FieldValues>;
+export declare function filterEmptySections(entry: Sections | Columns, formData: FieldValues, instance?: FieldValues): Sections | Columns | null;
+export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object?: Obj, parameters?: InputParameter[]): FormEntry[];
+/**
+ * Converts a plain text string to RTF format suitable for a RichTextEditor.
+ *
+ * Steps performed:
+ * 1. If the input is empty, returns a minimal RTF document with default font and size.
+ * 2. Escapes special RTF characters: backslashes, braces, line breaks, and tabs.
+ * 3. Removes carriage returns (\r) as they are unnecessary in RTF.
+ * 4. Converts non-ASCII characters (> 127) to Unicode escapes (\uN?) to preserve encoding.
+ * 5. Converts control characters (0-31, except \t, \n) to Unicode escapes to avoid RTF parsing errors.
+ *
+ * This ensures that any plain text input will be safely represented in RTF without losing formatting or characters.
+ */
+export declare function plainTextToRtf(plainText: string): string;
+export declare function getFieldDefinition(entry: FormEntry, object?: Obj, parameters?: InputParameter[], isDocument?: boolean): InputParameter | Property | undefined;

package/dist/published/components/custom/FormV2/components/utils.js

@@ -2,6 +2,7 @@ import { LocalDateTime } from '@js-joda/core';
 import jsonLogic from 'json-logic-js';
 import { get, isArray, isEmpty, isObject, omit, pick, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
+import { nanoid } from 'nanoid';
 import Handlebars from 'no-eval-handlebars';
 import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
 export const scrollIntoViewWithOffset = (el, offset, container) => {
@@ -624,15 +625,18 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
  *
  * Returns the cleaned submission ready for submitting.
  */
-export async function formatSubmission(submission, apiServices, objectId, instanceId, setSnackbarError) {
+export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
     for (const [key, value] of Object.entries(submission)) {
         if (isArray(value)) {
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {
+                    const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
+                    const entry = allEntries?.find((entry) => getEntryId(entry) === key);
                     const uploadedDocuments = await uploadDocuments(value, {
                         type: '',
                         view_permission: '',
+                        ...entry?.documentMetadata,
                     }, apiServices, instanceId, objectId);
                     submission[key] = uploadedDocuments;
                 }
@@ -668,3 +672,161 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     }
     return submission;
 }
+export function filterEmptySections(entry, formData, instance) {
+    if (entry.type === 'sections' && isArray(entry.sections)) {
+        const visibleSections = entry.sections.filter((section) => {
+            if (!section.entries || section.entries.length === 0)
+                return false;
+            for (const sectionEntry of section.entries) {
+                if (sectionEntry.type === 'sections' || sectionEntry.type === 'columns') {
+                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, formData, instance)) {
+                        return false;
+                    }
+                    else if (filterEmptySections(sectionEntry, formData, instance)) {
+                        return true;
+                    }
+                }
+                else if (entryIsVisible(sectionEntry, formData, instance)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (visibleSections.length === 0)
+            return null;
+        return {
+            ...entry,
+            sections: visibleSections,
+        };
+    }
+    if (entry.type === 'columns' && isArray(entry.columns)) {
+        const visibleColumns = entry.columns.filter((column) => {
+            if (!column.entries || column.entries.length === 0)
+                return false;
+            let hasVisibleEntry = false;
+            for (const columnEntry of column.entries) {
+                if (columnEntry.type === 'sections' || columnEntry.type === 'columns') {
+                    if (filterEmptySections(columnEntry, formData, instance)) {
+                        hasVisibleEntry = true;
+                        break;
+                    }
+                }
+                else {
+                    if (entryIsVisible(columnEntry, formData, instance)) {
+                        hasVisibleEntry = true;
+                        break;
+                    }
+                }
+            }
+            return hasVisibleEntry;
+        });
+        if (visibleColumns.length === 0)
+            return null;
+        return {
+            ...entry,
+            columns: visibleColumns,
+        };
+    }
+    return entry;
+}
+export function assignIdsToSectionsAndRichText(entries, object, parameters) {
+    return entries.map((entry) => {
+        if (entry.type === 'columns' && isArray(entry.columns)) {
+            return {
+                ...entry,
+                columns: entry.columns.map((column) => ({
+                    ...column,
+                    entries: isArray(column.entries)
+                        ? assignIdsToSectionsAndRichText(column.entries, object, parameters)
+                        : [],
+                })),
+            };
+        }
+        if (entry.type === 'sections' && isArray(entry.sections)) {
+            return {
+                ...entry,
+                sections: entry.sections.map((section) => ({
+                    ...section,
+                    id: nanoid(),
+                    entries: isArray(section.entries)
+                        ? assignIdsToSectionsAndRichText(section.entries, object, parameters)
+                        : [],
+                })),
+                id: nanoid(),
+            };
+        }
+        // Assign a unique id to each RichText field to avoid conflicts when rendering more than one
+        const fieldDefinition = getFieldDefinition(entry, object, parameters);
+        if (fieldDefinition && fieldDefinition.type === 'richText') {
+            return {
+                ...entry,
+                uniqueId: nanoid(),
+            };
+        }
+        return entry;
+    });
+}
+/**
+ * Converts a plain text string to RTF format suitable for a RichTextEditor.
+ *
+ * Steps performed:
+ * 1. If the input is empty, returns a minimal RTF document with default font and size.
+ * 2. Escapes special RTF characters: backslashes, braces, line breaks, and tabs.
+ * 3. Removes carriage returns (\r) as they are unnecessary in RTF.
+ * 4. Converts non-ASCII characters (> 127) to Unicode escapes (\uN?) to preserve encoding.
+ * 5. Converts control characters (0-31, except \t, \n) to Unicode escapes to avoid RTF parsing errors.
+ *
+ * This ensures that any plain text input will be safely represented in RTF without losing formatting or characters.
+ */
+export function plainTextToRtf(plainText) {
+    if (!plainText) {
+        return `{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 Calibri;}} \\f0\\fs22 }`;
+    }
+    let escaped = plainText
+        .replace(/\\/g, '\\\\')
+        .replace(/{/g, '\\{')
+        .replace(/}/g, '\\}')
+        .replace(/\n/g, '\\par\n')
+        .replace(/\t/g, '\\tab ')
+        .replace(/\r/g, '');
+    // Handle non-ASCII characters (> 127) with Unicode escapes
+    escaped = escaped.replace(/[\u0080-\uffff]/g, (char) => {
+        const code = char.charCodeAt(0);
+        if (code > 32767) {
+            return `\\u${code - 65536}?`;
+        }
+        return `\\u${code}?`;
+    });
+    // Handle control characters (0-31 except \t, \n, \r which we already handled)
+    // eslint-disable-next-line no-control-regex
+    escaped = escaped.replace(/[\u0000-\u0008\u000B-\u001F\u007F]/g, (char) => {
+        return `\\u${char.charCodeAt(0)}?`;
+    });
+    return `{\\rtf1\\ansi\\deff0 {\\fonttbl {\\f0 Calibri;}} \\f0\\fs22 ${escaped}}`;
+}
+export function getFieldDefinition(entry, object, parameters, isDocument) {
+    let def;
+    if (entry.type === 'input') {
+        def = parameters?.find((param) => param.id === entry.parameterId);
+    }
+    else if (entry.type === 'readonlyField') {
+        def = isDocument
+            ? docProperties.find((prop) => prop.id === entry.propertyId)
+            : isAddressProperty(entry.propertyId)
+                ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
+                : object?.properties?.find((prop) => prop.id === entry.propertyId);
+    }
+    else if (entry.type === 'inputField') {
+        def = entry.input;
+    }
+    else {
+        return undefined;
+    }
+    if (def?.enum && def.type === 'string') {
+        const cloned = structuredClone(def);
+        // single select must be made to be type choices for label and error handling
+        cloned.type = 'choices';
+        return cloned;
+    }
+    return def;
+}

package/dist/published/components/custom/FormV2/tests/FormRenderer.test.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRenderer from '../FormRenderer';
-import { createSpecialtyForm, jsonLogicDisplayTestSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, simpleConditionDisplayTestSpecialtyForm, specialtyObject, specialtyTypeObject, } from './test-data';
+import { accessibility508Object, createSpecialtyForm, jsonLogicDisplayTestSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, simpleConditionDisplayTestSpecialtyForm, specialtyObject, specialtyTypeObject, UpdateAccessibilityFormOne, UpdateAccessibilityFormTwo, users, } from './test-data';
 expect.extend(matchers);
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
@@ -35,6 +35,11 @@ describe('Form component', () => {
             if (sanitizedVersion === 'true') {
                 return HttpResponse.json(specialtyObject);
             }
+        }), http.get('/api/data/objects/accessibility508Object/effective', (req) => {
+            const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+            if (sanitizedVersion === 'true') {
+                return HttpResponse.json(accessibility508Object);
+            }
         }), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/api/data/objects/license/instances', () => {
             return HttpResponse.json([rnLicense, npLicense]);
         }), http.get('/api/data/objects/specialtyType/instances', (req) => {
@@ -56,7 +61,7 @@ describe('Form component', () => {
                 else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
                     return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
             }
-        }));
+        }), http.get('/api/accessManagement/users', () => HttpResponse.json(users)));
         server.listen();
     });
     afterAll(() => {
@@ -170,4 +175,208 @@ describe('Form component', () => {
             expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).not.toBeInTheDocument();
         });
     });
+    // accessibility508Form2
+    describe('508 accessibility compliance', () => {
+        it('supports keyboard navigation back and forth through Related Object dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await user.tab();
+            // Name field should be focused
+            expect(screen.getByLabelText('Name')).toHaveFocus();
+            await user.tab();
+            // License should be focused
+            expect(screen.getByLabelText('License')).toHaveFocus();
+            // Check reverse tabbing
+            await user.tab({ shift: true });
+            expect(screen.getByLabelText('Name')).toHaveFocus();
+        });
+        it('supports keyboard navigation back and forth through User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await user.tab();
+            // Name field should be focused
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toHaveFocus();
+            });
+            await user.tab();
+            // User should be focused
+            expect(screen.getByLabelText('User')).toHaveFocus();
+            // Check reverse tabbing
+            await user.tab({ shift: true });
+            expect(screen.getByLabelText('Name')).toHaveFocus();
+        });
+        it('supports keyboard selection of dropdown values using Enter key on Related Objects', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to License field
+            await user.tab();
+            await user.tab();
+            // Open dropdown with Enter
+            await user.keyboard('{Enter}');
+            // Navigate to first option
+            await user.keyboard('{ArrowDown}');
+            // Select option with Enter
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                expect(screen.getByText('RN License')).toBeInTheDocument();
+            });
+        });
+        it('supports keyboard selection of dropdown values using Enter key on Users', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to License field
+            await user.tab();
+            await user.tab();
+            // Open dropdown with Enter
+            await user.keyboard('{Enter}');
+            // Navigate to first option
+            await user.keyboard('{ArrowDown}');
+            // Select option with Enter
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('User 1');
+            });
+        });
+        it('supports navigating between dropdown options using arrow keys on Related Objects', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('License')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{ArrowDown}');
+            await waitFor(() => {
+                expect(screen.getByText('RN License')).toBeInTheDocument();
+            });
+            await user.keyboard('{ArrowDown}');
+            await user.keyboard('{Enter}');
+            // Verify first selection
+            await waitFor(() => {
+                expect(screen.getByText('RN License')).toBeInTheDocument();
+            });
+        });
+        it('supports navigating between dropdown options using arrow keys on User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{ArrowDown}');
+            await user.keyboard('{ArrowDown}');
+            await user.keyboard('{Enter}');
+            // Verify first selection
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('User 1');
+            });
+        });
+        it('supports clearing selection with the clear button on Related Objects', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { }, value: {
+                        id: '123',
+                        objectId: 'accessibility508Object',
+                        name: 'Test Accessibility 508 Object Instance',
+                        license: {
+                            id: 'rnLicense',
+                            name: 'RN License',
+                        },
+                    } })));
+            // Set up a selection first
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                expect(screen.getByText('RN License')).toBeInTheDocument();
+            });
+            // Manually focus the clear button since test environment can't reach it via tab,
+            // even though tabbing works correctly in the actual form
+            const clearButton = screen.getByRole('button', { name: 'Clear selection' });
+            clearButton.focus();
+            expect(clearButton).toHaveFocus();
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                expect(screen.queryByText('RN License')).not.toBeInTheDocument();
+            });
+        });
+        it('supports clearing selection with the clear button on User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormTwo, onChange: () => { }, value: {
+                        id: '123',
+                        objectId: 'accessibility508Object',
+                        name: 'Test Accessibility 508 Object Instance',
+                        user: {
+                            id: 'user1',
+                            name: 'User 1',
+                        },
+                    } })));
+            // Set up a selection first
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('User 1');
+            });
+            // Manually focus the clear button since test environment can't reach it via tab,
+            // even though tabbing works correctly in the actual form
+            const clearButton = screen.getByRole('button', { name: 'Clear selection' });
+            clearButton.focus();
+            expect(clearButton).toHaveFocus();
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'User' });
+                expect(input).toHaveValue('');
+            });
+        });
+        it('supports navigating to Add New option with arrow keys and opens modal', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(MemoryRouter, null,
+                React.createElement(FormRenderer, { form: UpdateAccessibilityFormOne, onChange: () => { } }),
+                ","));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{Enter}');
+            await user.keyboard('{ArrowUp}'); // Navigate to "Add New" option
+            await user.keyboard('{Enter}');
+            await waitFor(() => {
+                expect(screen.getByRole('dialog', { name: /add license/i })).toBeInTheDocument();
+            });
+        });
+    });
 });

package/dist/published/components/custom/FormV2/tests/test-data.d.ts

@@ -2,10 +2,13 @@ import { EvokeForm, Obj, ObjectInstance } from '@evoke-platform/context';
 export declare const createSpecialtyForm: EvokeForm;
 export declare const simpleConditionDisplayTestSpecialtyForm: EvokeForm;
 export declare const jsonLogicDisplayTestSpecialtyForm: EvokeForm;
+export declare const UpdateAccessibilityFormOne: EvokeForm;
+export declare const UpdateAccessibilityFormTwo: EvokeForm;
 export declare const licenseObject: Obj;
 export declare const licenseTypeObject: Obj;
 export declare const specialtyObject: Obj;
 export declare const specialtyTypeObject: Obj;
+export declare const accessibility508Object: Obj;
 export declare const rnLicense: ObjectInstance;
 export declare const npLicense: ObjectInstance;
 export declare const rnLicenseType: ObjectInstance;
@@ -14,3 +17,9 @@ export declare const rnSpecialtyType1: ObjectInstance;
 export declare const rnSpecialtyType2: ObjectInstance;
 export declare const npSpecialtyType1: ObjectInstance;
 export declare const npSpecialtyType2: ObjectInstance;
+export declare const users: {
+    id: string;
+    status: string;
+    email: string;
+    name: string;
+}[];