@onehat/ui 0.3.143 → 0.3.147

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.3.143",
+	"version": "0.3.147",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Form/Field/Combo/Combo.js

@@ -697,7 +697,7 @@ export function ComboComponent(props) {
 							if (selection[0]?.id === value) {
 								setIsSearchMode(false);
 								resetTextInputValue();
-								if (hideMenuOnSelection) {
+								if (hideMenuOnSelection && !isEditor) {
 									hideMenu();
 								}
 								return;
@@ -754,7 +754,7 @@ export function ComboComponent(props) {
 							return;
 						}
 						const id = Repository ? item.id : item[idIx];
-						if (id === value) {
+						if (id === value && !isEditor) {
 							hideMenu();
 							onInputFocus();
 						}

package/src/Components/Form/Form.js

@@ -119,10 +119,15 @@ function Form(props) {
 		} = props,
 		formRef = useRef(),
 		styles = UiGlobals.styles,
-		record = props.record?.length === 1 ? props.record[0] : props.record,
+		record = props.record?.length === 1 ? props.record[0] : props.record;
+	let skipAll = false;
+	if (record?.isDestroyed) {
+		skipAll = true; // if record is destroyed, skip render, but allow hooks to still be called
+	}
+	const
 		isMultiple = _.isArray(record),
 		isSingle = !isMultiple, // for convenience
-		isPhantom = !!record?.isPhantom,
+		isPhantom = !skipAll && !!record?.isPhantom, //
 		forceUpdate = useForceUpdate(),
 		[previousRecord, setPreviousRecord] = useState(record),
 		[containerWidth, setContainerWidth] = useState(),
@@ -507,7 +512,7 @@ function Form(props) {
 								let message = null;
 								if (error) {
 									message = error.message;
-									if (label) {
+									if (label && error.ref?.name) {
 										message = message.replace(error.ref.name, label);
 									}
 								}
@@ -660,6 +665,9 @@ function Form(props) {
 		};
 
 	useEffect(() => {
+		if (skipAll) {
+			return;
+		}
 		if (record === previousRecord) {
 			if (onInit) {
 				onInit(initialValues, formSetValue, formGetValues);
@@ -674,6 +682,9 @@ function Form(props) {
 	}, [record]);
 
 	useEffect(() => {
+		if (skipAll) {
+			return;
+		}
 		if (!Repository) {
 			return () => {
 				if (!_.isNil(editorStateRef)) {
@@ -692,6 +703,10 @@ function Form(props) {
 		};
 	}, [Repository]);
 
+	if (skipAll) {
+		return null;
+	}
+
 	// if (Repository && (!record || _.isEmpty(record) || record.isDestroyed)) {
 	// 	return null;
 	// }
@@ -765,7 +780,7 @@ function Form(props) {
 			editor = <>
 						{containerWidth >= CONTAINER_THRESHOLD ? <Row p={4} pl={0}>{formComponents}</Row> : null}
 						{containerWidth < CONTAINER_THRESHOLD ? <Column p={4}>{formComponents}</Column> : null}
-						<Column m={2} pt={4}>{formAncillaryComponents}</Column>
+						<Column m={2} pt={4} px={2}>{formAncillaryComponents}</Column>
 					</>;
 
 			additionalButtons = buildAdditionalButtons(additionalEditButtons);

package/src/Components/Hoc/withEditor.js

@@ -76,6 +76,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				const formState = editorStateRef.current;
 				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== selection && editorMode === EDITOR_MODE__EDIT) {
 					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
+				} else if (selection && (selection[0]?.isPhantom || selection[0]?.isRemotePhantom)) {
+					confirm('This new record is unsaved. Are you sure you want to cancel editing? Changes will be lost.', async () => {
+						await selection[0].delete();
+						doIt();
+					});
 				} else {
 					doIt();
 				}