@evoke-platform/ui-components 1.8.1-dev.0 → 1.8.1-dev.1

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

@@ -19,6 +19,7 @@ export const ObjectPropertyInput = (props) => {
     const [layout, setLayout] = useState();
     const [layoutLoaded, setLayoutLoaded] = useState(false);
     const DEFAULT_CREATE_ACTION = '_create';
+    const hasValue = instance?.[property.id]?.id || selectedInstance?.id;
     useEffect(() => {
         setLayoutLoaded(false);
         if (relatedObject) {
@@ -198,8 +199,7 @@ export const ObjectPropertyInput = (props) => {
                         } }, children));
                 }, sx: {
                     '& button.MuiButtonBase-root': {
-                        ...(!loadingOptions &&
-                            (instance?.[property.id]?.id || selectedInstance?.id)
+                        ...(!loadingOptions && hasValue
                             ? {
                                 visibility: 'visible',
                             }
@@ -213,7 +213,15 @@ export const ObjectPropertyInput = (props) => {
                         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: () => setOpenOptions(true), onClose: () => setOpenOptions(false), value: instance?.[property.id]?.id || selectedInstance?.id
+                }, onOpen: (e) => {
+                    // Don't open the options if there is a value that links to another page
+                    if (!(navigationSlug &&
+                        navigateTo &&
+                        ['DIV', 'INPUT'].includes(e.target?.nodeName) &&
+                        hasValue)) {
+                        setOpenOptions(true);
+                    }
+                }, onClose: () => setOpenOptions(false), value: hasValue
                     ? {
                         value: instance?.[property.id]?.id ??
                             selectedInstance?.id ??
@@ -241,7 +249,7 @@ export const ObjectPropertyInput = (props) => {
                         setDropdownInput(undefined);
                         return;
                     }
-                    if (instance?.[property.id]?.id || selectedInstance?.id) {
+                    if (hasValue) {
                         e.preventDefault();
                     }
                 }, loading: loadingOptions, onChange: (event, value) => {
@@ -263,24 +271,18 @@ export const ObjectPropertyInput = (props) => {
                     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) => {
+                }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: 'Select', readOnly: !loadingOptions && !!hasValue, onChange: (event) => setDropdownInput(event.target.value), onClick: (e) => {
                         if (navigationSlug &&
+                            navigateTo &&
                             ['DIV', 'INPUT'].includes(e.target?.nodeName) &&
-                            (instance?.[property.id]?.id ||
-                                selectedInstance?.id)) {
-                            if (navigateTo) {
-                                setOpenOptions(false);
-                                navigateTo(navigationSlug.replace(':instanceId', instance?.[property.id]?.id ??
-                                    selectedInstance?.id ??
-                                    ''));
-                            }
+                            hasValue) {
+                            setOpenOptions(false);
+                            navigateTo(navigationSlug.replace(':instanceId', instance?.[property.id]?.id ??
+                                selectedInstance?.id ??
+                                ''));
                         }
                     }, sx: {
-                        ...(!loadingOptions &&
-                            (instance?.[property.id]?.id ||
-                                selectedInstance?.id)
+                        ...(!loadingOptions && hasValue
                             ? {
                                 '.MuiOutlinedInput-root': {
                                     background: 'white',

package/package.json

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