@evoke-platform/ui-components 1.8.0-dev.1 → 1.8.0-dev.11

package/dist/published/components/core/TextField/TextField.js

@@ -4,7 +4,8 @@ import UIThemeProvider from '../../../theme';
 import FieldError from '../FieldError';
 import Typography from '../Typography';
 const TextField = (props) => {
-    const { id, variant, label, labelPlacement, readOnly, required, error, instructionText, errorMessage } = props;
+    const { labelPlacement, readOnly, instructionText, errorMessage, ...muiProps } = props;
+    const { id, variant, label, required, error } = muiProps;
     const readOnlyStyles = {
         '.MuiOutlinedInput-root': {
             paddingRight: '5px',
@@ -28,7 +29,7 @@ const TextField = (props) => {
                 readOnly: readOnly,
                 'aria-readonly': !!readOnly,
                 'data-testid': 'label-outside',
-            }, ...props, label: null, sx: readOnly
+            }, ...muiProps, label: null, sx: readOnly
                 ? { ...readOnlyStyles, ...props.sx }
                 : {
                     '& fieldset': { borderRadius: '8px' },

package/dist/published/components/custom/DataGrid/DataGrid.d.ts

@@ -23,6 +23,7 @@ export type DataGridProps<T extends GridValidRowModel> = MuiDataGridProps<T> & {
     hideSearchbar?: boolean;
     loadingOptions?: LoadingOptions;
     hideDownload?: boolean;
+    exportFileName?: string;
 };
 export default function <T extends GridValidRowModel>(props: DataGridProps<T>): React.JSX.Element;
 export {};

package/dist/published/components/custom/DataGrid/DataGrid.js

@@ -6,7 +6,7 @@ import LinearProgress from '../../core/LinearProgress';
 import { dateTimeBetweenOperator } from './DateTimeCustomOperator';
 import Toolbar from './Toolbar';
 export default function (props) {
-    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, hideDownload, ...rest } = props;
+    const { onRefresh, loading, theme, title, bulkAction, filterSettings, columns, rows, hideSearchbar, loadingOptions, hideDownload, exportFileName, ...rest } = props;
     const [anchorEl, setAnchorEl] = useState();
     const [loadingMessageIndex, setLoadingMessageIndex] = useState(0);
     const addColumnFilterOperators = (columns) => {
@@ -93,6 +93,7 @@ export default function (props) {
                     bulkAction,
                     hideSearchbar,
                     hideDownload,
+                    exportFileName,
                 },
                 panel: {
                     anchorEl: anchorEl,

package/dist/published/components/custom/DataGrid/Toolbar.d.ts

@@ -11,6 +11,7 @@ export type GridToolbarProps = MuiGridToolbarProps & {
     bulkAction?: BulkAction;
     hideSearchbar?: boolean;
     hideDownload?: boolean;
+    exportFileName?: string;
 };
 declare function Toolbar(props: GridToolbarProps): React.JSX.Element;
 export default Toolbar;

package/dist/published/components/custom/DataGrid/Toolbar.js

@@ -6,7 +6,8 @@ import UIThemeProvider from '../../../theme';
 import { Button, IconButton } from '../../core';
 import { Grid } from '../../layout';
 function Toolbar(props) {
-    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar, hideDownload } = props;
+    const { onRefresh, setAnchorEl, loading, theme, title, bulkAction, hideSearchbar, hideDownload, exportFileName } = props;
+    const resolvedFileName = exportFileName ?? 'data';
     const styles = {
         container: { display: 'flex', justifyContent: 'space-between', margin: '0 0 15px 0' },
         iconButton: {
@@ -57,7 +58,7 @@ function Toolbar(props) {
                                     '&:hover': { backgroundColor: '#f2f3f5' },
                                     paddingLeft: '10px',
                                     paddingRight: '10px',
-                                }, printOptions: { disableToolbarButton: true }, startIcon: React.createElement(FileDownloadRounded, null) }))),
+                                }, printOptions: { disableToolbarButton: true }, csvOptions: { fileName: resolvedFileName }, startIcon: React.createElement(FileDownloadRounded, null) }))),
                         React.createElement(Grid, { item: true },
                             React.createElement(GridToolbarFilterButton, { componentsProps: {
                                     button: {

package/dist/published/components/custom/DataGrid/index.d.ts

@@ -1,3 +1,4 @@
 import DataGrid from './DataGrid';
+export type { GridSortModel } from '@mui/x-data-grid';
 export { DataGrid };
 export default DataGrid;

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/ObjectPropertyInput.js

@@ -3,7 +3,7 @@ import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
 import React, { useCallback, useEffect, useState } from 'react';
 import { Close } from '../../../../../icons';
-import { Autocomplete, Button, Dialog, IconButton, Link, Paper, TextField, Tooltip, Typography, } from '../../../../core';
+import { Autocomplete, Button, Dialog, IconButton, Link, ListItem, Paper, TextField, Tooltip, Typography, } from '../../../../core';
 import { Box } from '../../../../layout';
 import { getPrefixedUrl, normalizeDates, transformToWhere } from '../../utils';
 import { RelatedObjectInstance } from './RelatedObjectInstance';
@@ -146,9 +146,27 @@ export const ObjectPropertyInput = (props) => {
         return instance ? template(instance) : undefined;
     };
     const navigationSlug = defaultPages && property.objectId && defaultPages[property.objectId];
+    const dropdownOptions = [
+        ...options.map((o) => ({ label: o.name, value: o.id })),
+        ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === DEFAULT_CREATE_ACTION)
+            ? [
+                {
+                    value: '__new__',
+                    label: '+ Add New',
+                },
+            ]
+            : []),
+    ];
     return (React.createElement(React.Fragment, null,
         displayOption === 'dropdown' ? (React.createElement(React.Fragment, null,
-            React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, componentsProps: {
+            React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, clearIcon: React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.stopPropagation();
+                        }
+                    }, onClick: (e) => {
+                        setOpenOptions(false);
+                    }, "aria-label": "Clear selection", sx: { padding: 0 } },
+                    React.createElement(Close, { sx: { fontSize: '20px' } })), componentsProps: {
                     popper: {
                         modifiers: [
                             {
@@ -163,6 +181,7 @@ export const ObjectPropertyInput = (props) => {
                             boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
                             '& .MuiAutocomplete-listbox': {
                                 maxHeight: '25vh',
+                                paddingBottom: '0px',
                             },
                             '& .MuiAutocomplete-noOptions': {
                                 fontFamily: 'sans-serif',
@@ -176,20 +195,7 @@ export const ObjectPropertyInput = (props) => {
                                 paddingLeft: '24px',
                                 color: 'rgba(145, 158, 171, 1)',
                             },
-                        } },
-                        children,
-                        mode !== 'existingOnly' &&
-                            relatedObject?.actions?.some((a) => a.id === DEFAULT_CREATE_ACTION) && (React.createElement(Button, { fullWidth: true, sx: {
-                                justifyContent: 'flex-start',
-                                pl: 2,
-                                minHeight: '48px',
-                                borderTop: '1px solid rgba(145, 158, 171, 0.24)',
-                                borderRadius: '0p 0pc 6px 6px',
-                                paddingLeft: '22px',
-                                fontWeight: 400,
-                            }, onMouseDown: (e) => {
-                                setOpenCreateDialog(true);
-                            }, color: 'inherit' }, "+ Add New"))));
+                        } }, children));
                 }, sx: {
                     '& button.MuiButtonBase-root': {
                         ...(!loadingOptions &&
@@ -200,18 +206,14 @@ export const ObjectPropertyInput = (props) => {
                             : {}),
                     },
                 }, noOptionsText: 'No options available', renderOption: (props, option) => {
-                    return (React.createElement("li", { ...props, key: option.id },
+                    const isAddNew = option.value === '__new__';
+                    return (React.createElement(ListItem, { ...props, key: props.id, sx: {
+                            ...(isAddNew ? { borderTop: '1px solid rgba(145, 158, 171, 0.24)' } : {}),
+                        } },
                         React.createElement(Box, null,
                             React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px' } }, option.label),
                             layout?.secondaryTextExpression ? (React.createElement(Typography, { sx: { marginLeft: '8px', fontSize: '14px', color: '#637381' } }, compileExpression(layout?.secondaryTextExpression, options.find((o) => o.id === option.value)))) : null)));
-                }, onOpen: () => {
-                    if (instance?.[property.id]?.id || selectedInstance?.id) {
-                        setOpenOptions(false);
-                    }
-                    else {
-                        setOpenOptions(true);
-                    }
-                }, onClose: () => setOpenOptions(false), value: instance?.[property.id]?.id || selectedInstance?.id
+                }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: instance?.[property.id]?.id || selectedInstance?.id
                     ? {
                         value: instance?.[property.id]?.id ??
                             selectedInstance?.id ??
@@ -225,11 +227,20 @@ export const ObjectPropertyInput = (props) => {
                         return option.value === value;
                     }
                     return option.value === value?.value;
-                }, options: options.map((o) => ({ label: o.name, value: o.id })), getOptionLabel: (option) => {
+                }, options: dropdownOptions, filterOptions: (options) => options, getOptionLabel: (option) => {
                     return typeof option === 'string'
                         ? (options.find((o) => o.id === option)?.name ?? '')
                         : option.label;
-                }, onKeyDownCapture: (e) => {
+                }, onKeyDown: (e) => {
+                    // prevents keyboard trap
+                    if (e.key === 'Tab') {
+                        return;
+                    }
+                    if (e.key === 'Enter') {
+                        setOpenOptions(true);
+                        setDropdownInput(undefined);
+                        return;
+                    }
                     if (instance?.[property.id]?.id || selectedInstance?.id) {
                         e.preventDefault();
                     }
@@ -240,12 +251,19 @@ export const ObjectPropertyInput = (props) => {
                         handleChangeObjectProperty(property.id, null);
                         instance[property.id] = null;
                     }
+                    else if (value?.value === '__new__') {
+                        setOpenCreateDialog(true);
+                    }
                     else {
                         const selectedInstance = options.find((o) => o.id === value?.value);
                         setSelectedInstance(selectedInstance);
                         handleChangeObjectProperty(property.id, selectedInstance);
                     }
-                }, selectOnFocus: false, onBlur: () => setDropdownInput(undefined), renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions &&
+                }, selectOnFocus: false, onBlur: () => {
+                    if (dropdownInput) {
+                        getDropdownOptions();
+                    }
+                }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions &&
                         !!(instance?.[property.id]?.id ||
                             selectedInstance?.id), onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
                         if (navigationSlug &&
@@ -257,15 +275,6 @@ export const ObjectPropertyInput = (props) => {
                                     selectedInstance?.id ??
                                     ''));
                         }
-                        if (openOptions &&
-                            e.target?.nodeName === 'svg') {
-                            setOpenOptions(false);
-                        }
-                        else if (!['DIV', 'INPUT'].includes(e.target?.nodeName) &&
-                            !selectedInstance) {
-                            setOptions(options);
-                            setOpenOptions(true);
-                        }
                     }, sx: {
                         ...(!loadingOptions &&
                             (instance?.[property.id]?.id ||
@@ -345,8 +354,8 @@ export const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add`, disabled: !canUpdateProperty }, "Add")))),
-        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose },
-            React.createElement(Typography, { sx: {
+        openCreateDialog && (React.createElement(React.Fragment, null, nestedFieldsView ? (React.createElement(RelatedObjectInstance, { apiServices: apiServices, handleClose: handleClose, handleChangeObjectProperty: handleChangeObjectProperty, instance: instance, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, property: property, nestedFieldsView: nestedFieldsView, mode: mode, setSnackbarError: setSnackbarError, displayOption: displayOption, setOptions: setOptions, options: options, filter: filter, user: user, layout: layout, richTextEditor: richTextEditor })) : (React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: openCreateDialog, onClose: (e, reason) => reason !== 'backdropClick' && handleClose, "aria-labelledby": "add-dialog-title" },
+            React.createElement(Typography, { id: "add-dialog-title", sx: {
                     marginTop: '28px',
                     fontSize: '22px',
                     fontWeight: 700,

package/dist/published/components/custom/Form/FormComponents/ObjectComponent/RelatedObjectInstance.js

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { InfoRounded } from '../../../../../icons';
 import { Alert, Button, FormControlLabel, Radio, RadioGroup } from '../../../../core';
 import { Box, Grid } from '../../../../layout';
-import { Form } from '../../../Form';
+import { Form } from '../../Common/Form';
 import { getPrefixedUrl, normalizeDateTime, normalizeDates } from '../../utils';
 import { InstanceLookup } from './InstanceLookup';
 const styles = {

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.d.ts

@@ -6,7 +6,7 @@ export type UserPropertyProps = {
     property: Property;
     apiServices: ApiServices;
     user?: UserAccount;
-    handleChangeUserProperty: (user: AutocompleteOption) => void;
+    handleChangeUserProperty: (user: AutocompleteOption | null) => void;
     error?: boolean;
     setSnackbarError?: (snackbarError: {
         showAlert: boolean;

package/dist/published/components/custom/Form/FormComponents/UserComponent/UserProperty.js

@@ -1,6 +1,7 @@
 import { ExpandMore } from '@mui/icons-material';
 import React, { useEffect, useState } from 'react';
-import { Autocomplete, Paper, TextField, Typography } from '../../../../core';
+import { Close } from '../../../../../icons';
+import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl } from '../../utils';
 export const UserProperty = (props) => {
     const { id, property, apiServices, handleChangeUserProperty, error, filter, value, user, fieldHeight } = props;
@@ -37,7 +38,16 @@ export const UserProperty = (props) => {
         }
     }, [property, filter]);
     return (options && (React.createElement(React.Fragment, null,
-        React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue ? '' : React.createElement(ExpandMore, null), PaperComponent: ({ children }) => {
+        React.createElement(Autocomplete, { id: id, fullWidth: true, open: openOptions, popupIcon: userValue ? '' : React.createElement(ExpandMore, null), clearIcon: !loadingOptions && userValue ? (React.createElement(IconButton, { size: "small", disableRipple: true, onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.stopPropagation();
+                    }
+                }, onClick: (e) => {
+                    setOpenOptions(false);
+                }, "aria-label": "Clear selection", sx: {
+                    padding: 0,
+                } },
+                React.createElement(Close, { sx: { fontSize: '20px' } }))) : null, PaperComponent: ({ children }) => {
                 return (React.createElement(Paper, { sx: {
                         borderRadius: '12px',
                         boxShadow: '0px 24px 48px 0px rgba(145, 158, 171, 0.2)',
@@ -72,9 +82,7 @@ export const UserProperty = (props) => {
                         " ",
                         '',
                         users?.find((user) => option.value === user.id)?.status === 'Inactive' ? (React.createElement("span", null, "(Inactive)")) : (''))));
-            }, onOpen: () => {
-                setOpenOptions(true);
-            }, onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
+            }, onOpen: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: userValue ?? '', options: options, getOptionLabel: (option) => {
                 if (typeof option === 'string') {
                     return options.find((o) => o.value === option)?.label ?? '';
                 }
@@ -88,7 +96,15 @@ export const UserProperty = (props) => {
                         }
                     }
                 }
-            }, onKeyDownCapture: (e) => {
+            }, onKeyDown: (e) => {
+                // prevents keyboard trap
+                if (e.key === 'Tab') {
+                    return;
+                }
+                if (e.key === 'Enter') {
+                    setOpenOptions(true);
+                    return;
+                }
                 if (value) {
                     e.preventDefault();
                 }

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -1,4 +1,5 @@
 import { ApiServices } from '@evoke-platform/context';
+import * as matchers from '@testing-library/jest-dom/matchers';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import axios from 'axios';
@@ -8,7 +9,8 @@ import { setupServer } from 'msw/node';
 import React from 'react';
 import { expect, it } from 'vitest';
 import Form from '../Common/Form';
-import { licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
+import { accessibility508Object, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, users, } from './test-data';
+expect.extend(matchers);
 const removePoppers = () => {
     const portalSelectors = ['.MuiAutocomplete-popper'];
     portalSelectors.forEach((selector) => {
@@ -20,7 +22,7 @@ describe('Form component', () => {
     let server;
     let apiServices;
     beforeAll(() => {
-        server = setupServer(http.get('/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/data/objects/license/instances', () => {
+        server = setupServer(http.get('/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('accessManagement/users', () => HttpResponse.json(users)), http.get('/data/objects/license/instances', () => {
             return HttpResponse.json([rnLicense, npLicense]);
         }), http.get('/data/objects/specialtyType/instances', (req) => {
             const filter = new URL(req.request.url).searchParams.get('filter');
@@ -155,4 +157,192 @@ describe('Form component', () => {
             expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
         });
     });
+    describe('508 accessibility compliance', () => {
+        it('supports keyboard navigation back and forth through Related Object dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            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(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            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(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            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: 'License' });
+                expect(input).toHaveValue('RN License');
+            });
+        });
+        it('supports keyboard selection of dropdown values using Enter key on Users', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            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(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{ArrowDown}'); // Open dropdown
+            await user.keyboard('{ArrowDown}'); // First option
+            await user.keyboard('{Enter}');
+            // Verify first selection
+            await waitFor(() => {
+                const input = screen.getByRole('combobox', { name: 'License' });
+                expect(input).toHaveValue('RN License');
+            });
+        });
+        it('supports navigating between dropdown options using arrow keys on User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            await waitFor(() => {
+                expect(screen.getByLabelText('Name')).toBeInTheDocument();
+            });
+            // Navigate to and open dropdown
+            await user.tab();
+            await user.tab();
+            await user.keyboard('{ArrowDown}'); // Open dropdown
+            await user.keyboard('{ArrowDown}'); // First option
+            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(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'accessibility508',
+                    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(() => {
+                const input = screen.getByRole('combobox', { name: 'License' });
+                expect(input).toHaveValue('RN License');
+            });
+            // 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: 'License' });
+                expect(input).toHaveValue('');
+            });
+        });
+        it('supports clearing selection with the clear button on User dropdowns', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(Form, { actionId: '_update2', actionType: 'update', object: accessibility508Object, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'accessibility508',
+                    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(Form, { actionId: '_update1', actionType: 'update', object: accessibility508Object, apiServices: apiServices }));
+            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/Form/tests/test-data.d.ts

@@ -1,6 +1,7 @@
 import { Obj, ObjectInstance } from '@evoke-platform/context';
 export declare const licenseObject: Obj;
 export declare const licenseTypeObject: Obj;
+export declare const accessibility508Object: Obj;
 export declare const specialtyObject: Obj;
 export declare const specialtyTypeObject: Obj;
 export declare const rnLicense: ObjectInstance;
@@ -11,3 +12,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;
+}[];