@evoke-platform/ui-components 1.11.0-dev.0 → 1.11.0-dev.2

package/dist/published/components/custom/FormField/Select/Select.js

@@ -118,7 +118,7 @@ const Select = (props) => {
                             setValue(e.target.value);
                             setInputValue(e.target.value);
                             onChange && onChange(property.id, e.target.value, property);
-                        }, size: 'small', onFocus: () => setIsOtherFocused(true), onBlur: (e) => {
+                        }, size: 'small', onFocus: () => setIsOtherFocused(true), onBlur: async (e) => {
                             // If another radio button is focused, change the value to that radio button's value.
                             const targetElement = e.nativeEvent.relatedTarget;
                             if (targetElement?.defaultValue && targetElement.name === `radioGroup-${id}`) {
@@ -128,6 +128,13 @@ const Select = (props) => {
                                 onChange && onChange(property.id, e.target.value, property);
                             }
                             setIsOtherFocused(false);
+                            // Trigger autosave when the custom value field loses focus
+                            try {
+                                await onAutosave?.(id);
+                            }
+                            catch (error) {
+                                console.error('Autosave failed:', error);
+                            }
                         } })))))),
         onChange && !readOnly && value && (React.createElement(Box, { sx: {
                 ':hover': { cursor: 'pointer' },

package/dist/published/components/custom/FormField/Select/Select.test.js

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
+import { FormContext } from '../../FormV2/components/FormContext';
 import Select from './Select';
 describe('Single select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -61,6 +62,27 @@ describe('Single select', () => {
         await user.click(customOption);
         expect(onChangeMock).toBeCalledWith('selectOptions', expect.objectContaining({ label: 'Add "custom option"', value: 'custom option' }), choiceProperty);
     });
+    it('triggers autosave when entering a custom value in dropdown combobox', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true })));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await user.type(input, 'custom option');
+        // Select the custom option from dropdown
+        const customOption = await screen.findByRole('option', { name: 'Add "custom option"' });
+        await user.click(customOption);
+        // Verify autosave was triggered
+        expect(onAutosaveMock).toHaveBeenCalledWith('testSelect');
+    });
 });
 describe('Multi select', () => {
     // Right now an object property is required for this to function, but eventually this should go
@@ -122,6 +144,34 @@ describe('Multi select', () => {
         expect(onChangeMock).toBeCalledTimes(2);
         expect(onChangeMock).lastCalledWith('multiSelect', ['custom option 1', 'option 1'], multiChoiceProperty);
     });
+    it('triggers autosave when entering custom values in multiselect combobox', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "multiSelect", property: multiChoiceProperty, selectOptions: options, onChange: onChangeMock, isCombobox: true })));
+        const input = screen.getByRole('combobox');
+        await user.click(input);
+        await user.type(input, 'custom option 1');
+        // Select the first custom option
+        const customOption1 = await screen.findByRole('option', { name: 'Add "custom option 1"' });
+        await user.click(customOption1);
+        // Verify autosave was triggered for first custom value
+        expect(onAutosaveMock).toHaveBeenCalledWith('multiSelect');
+        onAutosaveMock.mockClear();
+        // Add a second custom option
+        await user.type(input, 'custom option 2');
+        const customOption2 = await screen.findByRole('option', { name: 'Add "custom option 2"' });
+        await user.click(customOption2);
+        // Verify autosave was triggered for second custom value
+        expect(onAutosaveMock).toHaveBeenCalledWith('multiSelect');
+    });
 });
 describe('Radio Single select', () => {
     const choiceProperty = {
@@ -166,4 +216,55 @@ describe('Radio Single select', () => {
         await user.type(otherTextField, 'custom option');
         expect(onChangeMock).toBeCalledWith('selectOptions', expect.stringContaining('custom option'), choiceProperty);
     });
+    it('triggers autosave when a custom value is entered', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true })));
+        // Select the "Other" radio option
+        await user.click(screen.getByRole('radio', { name: 'Other' }));
+        const otherTextField = await screen.findByRole('textbox', { name: 'Other' });
+        // Type a custom value
+        await user.type(otherTextField, 'custom option');
+        // Blur the text field by clicking elsewhere
+        await user.tab();
+        // Verify autosave was triggered
+        expect(onAutosaveMock).toHaveBeenCalledWith('testSelect');
+    });
+    it('triggers autosave when clearing the custom value', async () => {
+        const user = userEvent.setup();
+        const onChangeMock = vi.fn((name, value, property) => { });
+        const onAutosaveMock = vi.fn();
+        const options = ['option 1', 'option 2', 'option 3'];
+        render(React.createElement(FormContext.Provider, { value: {
+                fetchedOptions: {},
+                setFetchedOptions: () => { },
+                onAutosave: onAutosaveMock,
+                width: 1200,
+            } },
+            React.createElement(Select, { id: "testSelect", property: choiceProperty, selectOptions: options, displayOption: 'radioButton', sortBy: 'ASC', onChange: onChangeMock, isCombobox: true })));
+        // Select the "Other" radio option and enter a custom value
+        await user.click(await screen.findByRole('radio', { name: 'Other' }));
+        const otherTextField = await screen.findByRole('textbox', { name: 'Other' });
+        await user.type(otherTextField, 'custom option');
+        // Blur to set the value and trigger the first autosave
+        await user.tab();
+        // Clear the mock to isolate the clear action
+        onAutosaveMock.mockClear();
+        onChangeMock.mockClear();
+        // Click the clear button (now visible since value is set)
+        const clearButton = await screen.findByRole('button', { name: 'Clear' });
+        await user.click(clearButton);
+        // Verify onChange was called with empty value
+        expect(onChangeMock).toHaveBeenCalledWith('selectOptions', '');
+        // Verify autosave was triggered after clearing
+        expect(onAutosaveMock).toHaveBeenCalledWith('testSelect');
+    });
 });

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -11,7 +11,7 @@ import { getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
     const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, relatedObjectId, } = props;
-    const { fetchedOptions, setFetchedOptions, parameters, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
+    const { fetchedOptions, setFetchedOptions, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
@@ -205,8 +205,8 @@ const ObjectPropertyInput = (props) => {
     }, [relatedObjectId, fetchedOptions, id]);
     useEffect(() => {
         (async () => {
-            if (parameters && fetchedOptions[`${id}NavigationSlug`] === undefined) {
-                const pages = await getDefaultPages(parameters, defaultPages, findDefaultPageSlugFor);
+            if (fetchedOptions[`${id}NavigationSlug`] === undefined) {
+                const pages = await getDefaultPages([{ ...fieldDefinition, objectId: relatedObjectId }], defaultPages, findDefaultPageSlugFor);
                 if (relatedObjectId && pages[relatedObjectId]) {
                     setNavigationSlug(pages[relatedObjectId]);
                     setFetchedOptions({
@@ -221,7 +221,7 @@ const ObjectPropertyInput = (props) => {
                 }
             }
         })();
-    }, [parameters, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
+    }, [id, fieldDefinition, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
     const handleClose = () => {
         setOpenCreateDialog(false);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.11.0-dev.0",
+    "version": "1.11.0-dev.2",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",