@onehat/ui 0.3.57 → 0.3.58

package/package.json

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

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

@@ -12,9 +12,9 @@ import {
 } from '../../../../Constants/UiModes.js';
 import UiGlobals from '../../../../UiGlobals.js';
 import Input from '../Input.js';
+import withAlert from '../../../Hoc/withAlert.js';
 import withComponent from '../../../Hoc/withComponent.js';
 import withData from '../../../Hoc/withData.js';
-import withSelection from '../../../Hoc/withSelection.js';
 import withValue from '../../../Hoc/withValue.js';
 import emptyFn from '../../../../Functions/emptyFn.js';
 import { Grid, WindowedGridEditor } from '../../../Grid/Grid.js';
@@ -22,15 +22,10 @@ import IconButton from '../../../Buttons/IconButton.js';
 import CaretDown from '../../../Icons/CaretDown.js';
 import _ from 'lodash';
 
-// Combo requires the use of HOC withSelection() whenever it's used.
-// The default export is *with* the HOC. A separate *raw* component is
-// exported which can be combined with many HOCs for various functionality.
-
 export function ComboComponent(props) {
 	const {
 			additionalButtons,
 			autoFocus = false,
-			forceSelection = true,
 			tooltipRef = null,
 			tooltip = null,
 			menuMinWidth = 150,
@@ -39,10 +34,14 @@ export function ComboComponent(props) {
 			_input = {},
 			isEditor = false,
 			isDisabled = false,
+			tooltipPlacement = 'bottom',
+			onRowPress,
 
-			// withValue
-			value,
-			setValue,
+			// withComponent
+			self,
+
+			// withAlert
+			confirm,
 			
 			// withData
 			Repository,
@@ -50,32 +49,28 @@ export function ComboComponent(props) {
 			idIx,
 			displayIx,
 
-			// withSelection
-			disableWithSelection,
-			selection,
-			setSelection,
-			selectionMode,
-			selectNext,
-			selectPrev,
-			getDisplayValuesFromSelection,
-
-			tooltipPlacement = 'bottom',
+			// withValue
+			value,
+			setValue,
 		} = props,
 		styles = UiGlobals.styles,
 		inputRef = useRef(),
 		triggerRef = useRef(),
 		menuRef = useRef(),
-		isManuallyEnteringText = useRef(false),
+		displayValueRef = useRef(null),
 		savedSearch = useRef(null),
 		typingTimeout = useRef(),
 		[isMenuShown, setIsMenuShown] = useState(false),
 		[isRendered, setIsRendered] = useState(false),
-		[textValue, setTextValue] = useState(''),
+		[isReady, setIsReady] = useState(false),
+		[isSearchMode, setIsSearchMode] = useState(false),
+		[gridSelection, setGridSelection] = useState(null),
+		[textInputValue, setTextInputValue] = useState(''),
+		[newEntityDisplayValue, setNewEntityDisplayValue] = useState(null),
 		[width, setWidth] = useState(0),
-		[height, setHeight] = useState(null),
 		[top, setTop] = useState(0),
 		[left, setLeft] = useState(0),
-		showMenu = () => {
+		showMenu = async () => {
 			if (isMenuShown) {
 				return;
 			}
@@ -107,7 +102,7 @@ export function ComboComponent(props) {
 				}
 			}
 			if (Repository && !Repository.isLoaded) {
-				Repository.reload();
+				await Repository.load();
 			}
 			setIsMenuShown(true);
 		},
@@ -117,11 +112,8 @@ export function ComboComponent(props) {
 			}
 			setIsMenuShown(false);
 		},
-		getIsManuallyEnteringText = () => {
-			return isManuallyEnteringText.current;
-		},
-		setIsManuallyEnteringText = (bool) => {
-			isManuallyEnteringText.current = bool;
+		toggleMenu = () => {
+			setIsMenuShown(!isMenuShown);
 		},
 		getSavedSearch = () => {
 			return savedSearch.current;
@@ -129,8 +121,8 @@ export function ComboComponent(props) {
 		setSavedSearch = (val) => {
 			savedSearch.current = val;
 		},
-		toggleMenu = () => {
-			setIsMenuShown(!isMenuShown);
+		resetInputTextValue = () => {
+			setTextInputValue(getDisplayValue());
 		},
 		onInputKeyPress = (e, inputValue) => {
 			if (disableDirectEntry) {
@@ -138,6 +130,8 @@ export function ComboComponent(props) {
 			}
 			switch(e.key) {
 				case 'Escape':
+					setIsSearchMode(false);
+					resetInputTextValue();
 					hideMenu();
 					break;
 				case 'Enter':
@@ -145,24 +139,42 @@ export function ComboComponent(props) {
 					if (_.isEmpty(inputValue) && !_.isNull(value)) {
 						// User pressed Enter on an empty text field, but value is set to something
 						// This means the user cleared the input and pressed enter, meaning he wants to clear the value
-
-						// clear the value
 						setValue(null);
-						if (isMenuShown) {
-							hideMenu();
-						}
-					} else {
-						toggleMenu();
+						hideMenu();
+						return;
+					}
+					
+					if (_.isEmpty(gridSelection)) {
+						confirm('You have nothing selected in the dropdown menu. Clear value?', doIt, true);
+						return;
+					}
+
+					doIt();
+
+					function doIt() {
+						setValue(gridSelection?.id);
+						hideMenu();
 					}
 					break;
-				case 'ArrowDown':
-					e.preventDefault();
-					selectNext();
-					break;
-				case 'ArrowUp':
-					e.preventDefault();
-					selectPrev();
-					break;
+				// case 'ArrowDown':
+				// 	e.preventDefault();
+				// 	showMenu();
+				// 	selectNext();
+				// 	setTimeout(() => {
+				// 		if (!self.children?.dropdownGrid?.selectPrev) {
+				// 			debugger;
+				// 		}
+				// 		self.children.dropdownGrid.selectNext();
+				// 	}, 10);
+				// 	break;
+				// case 'ArrowUp':
+				// 	e.preventDefault();
+				// 	showMenu();
+				// 	selectPrev();
+				// 	setTimeout(() => {
+				// 		self.children.dropdownGrid.selectPrev();
+				// 	}, 10);
+				// 	break;
 				default:
 			}
 		},
@@ -170,140 +182,138 @@ export function ComboComponent(props) {
 			if (disableDirectEntry) {
 				return;
 			}
-			setTextValue(value);
 
-			setIsManuallyEnteringText(true);
+			if (_.isEmpty(value)) {
+				// text input is cleared
+				hideMenu();
+				return;
+			}
+
+			setTextInputValue(value);
+			showMenu();
+
 			clearTimeout(typingTimeout.current);
 			typingTimeout.current = setTimeout(() => {
 				searchForMatches(value);
 			}, 300);
 		},
+		onInputFocus = (e) => {
+			inputRef.current.select();
+		},
 		onInputBlur = (e) => {
-			const {
-					relatedTarget
-				} = e;
-
-			setIsManuallyEnteringText(false);
-
-			// If user focused on the trigger and text is blank, clear the selection and close the menu
-			if ((triggerRef.current === relatedTarget || triggerRef.current.contains(relatedTarget)) && (_.isEmpty(textValue) || _.isNil(textValue))) {
-				if (!disableWithSelection) {
-					setSelection([]); // delete current selection
-				}
-				hideMenu();
-				return;
-			}
-			
-			// If user focused on the menu or trigger, ignore this blur
-			if (triggerRef.current === relatedTarget ||
-				triggerRef.current.contains(relatedTarget) || 
-				menuRef.current=== relatedTarget || 
-				menuRef.current?.contains(relatedTarget)) {
+			if (isEventStillInComponent(e)) {
+				// ignore the blur
 				return;
 			}
 
-			if (!relatedTarget ||
-					(
-						!inputRef.current.contains(relatedTarget) && 
-						triggerRef.current !== relatedTarget && 
-						(!menuRef.current || !menuRef.current.contains(relatedTarget))
-					)
-				) {
-				hideMenu();
-			}
-			if (_.isEmpty(textValue) || _.isNil(textValue)) {
-
-				if (!disableWithSelection) {
-					setSelection([]); // delete current selection
-				}
-
-			} else if (getIsManuallyEnteringText()) {
-				if (forceSelection) {
-					if (!disableWithSelection) {
-						setSelection([]); // delete current selection
-					} else {
-						setValue(textValue);
-					}
-					hideMenu();
-				} else {
-					setValue(textValue);
-				}
-			}
-			
-			if (!disableWithSelection) {
-				if (_.isEmpty(selection)) {
-					setTextValue('');
-				}
-			}
+			setIsSearchMode(false);
+			resetInputTextValue();
+			hideMenu();
 		},
-		onInputClick = (e) => {
+		onTriggerPress = (e) => {
 			if (!isRendered) {
 				return;
 			}
+			clearGridFilters();
 			showMenu();
 		},
-		onTriggerPress = (e) => {
-			if (!isRendered) {
+		onTriggerBlur = (e) => {
+			if (!isMenuShown) {
 				return;
 			}
-			if (isMenuShown) {
-				hideMenu();
-			} else {
-				showMenu();
+
+			if (isEventStillInComponent(e)) {
+				// ignore the blur
+				return;
 			}
-			inputRef.current.focus();
+
+			setIsSearchMode(false);
+			resetInputTextValue();
+			hideMenu();
 		},
-		onTriggerBlur = (e) => {
+		isEventStillInComponent = (e) => {
 			const {
 					relatedTarget
 				} = e;
-			
-			if (!disableWithSelection) {
-				if (_.isEmpty(textValue) || _.isNil(textValue)) {
-					setSelection([]); // delete current selection
+			return !relatedTarget ||
+					!menuRef.current ||
+					!triggerRef.current ||
+					triggerRef.current === relatedTarget ||
+					triggerRef.current.contains(relatedTarget) || 
+					menuRef.current === relatedTarget || 
+					menuRef.current?.contains(relatedTarget);
+		},
+		clearGridFilters = async () => {
+			if (Repository) {
+				if (Repository.isLoading) {
+					await Repository.waitUntilDoneLoading();
 				}
-			}
+				
+				// clear filter
+				if (Repository.isRemote) {
+					let searchField = 'q';
+					const searchValue = null;
 
-			if (!isMenuShown) {
-				return;
-			}
-			if (!relatedTarget || 
-					(!inputRef.current.contains(relatedTarget) && triggerRef.current !== relatedTarget && !menuRef.current.contains(relatedTarget))) {
-				hideMenu();
+					// Check to see if displayField is a real field
+					const
+						schema = Repository.getSchema(),
+						displayFieldName = schema.model.displayProperty,
+						displayFieldDef = schema.getPropertyDefinition(displayFieldName);
+					if (!displayFieldDef.isVirtual) {
+						searchField = displayFieldName + ' LIKE';
+					}
+
+					Repository.clear();
+					await Repository.filter(searchField, searchValue);
+					if (!this.isAutoLoad) {
+						await Repository.reload();
+					}
+
+				} else {
+					throw Error('Not yet implemented');
+				}
+
+				setSavedSearch(null);
+			
+			} else {
+				throw Error('Not yet implemented');
 			}
 		},
 		searchForMatches = async (value) => {
-
-			if (_.isEmpty(value)) {
-				return;
+			if (!isMenuShown) {
+				showMenu();
 			}
 
+			setIsSearchMode(true);
+
 			let found;
 			if (Repository) {
+				if (Repository.isLoading) {
+					await Repository.waitUntilDoneLoading();
+				}
 				
 				// Set filter
 				let filter = {};
 				if (Repository.isRemote) {
 					let searchField = 'q';
+					const searchValue = _.isEmpty(value) ? null : value + '%';
 
 					// Check to see if displayField is a real field
 					const
 						schema = Repository.getSchema(),
-						displayFieldName = schema.model.displayProperty;
+						displayFieldName = schema.model.displayProperty,
 						displayFieldDef = schema.getPropertyDefinition(displayFieldName);
 					if (!displayFieldDef.isVirtual) {
 						searchField = displayFieldName + ' LIKE';
 					}
 
-					value += '%';
-
-					await Repository.filter(searchField, value);
+					await Repository.filter(searchField, searchValue);
 					if (!this.isAutoLoad) {
 						await Repository.reload();
 					}
 
 				} else {
-					throw Error('Not sure if this works yet!');
+					throw Error('Not yet implemented');
 
 					// Fuzzy search with getBy filter function
 					filter = (entity) => {
@@ -316,18 +326,11 @@ export function ComboComponent(props) {
 				}
 
 				setSavedSearch(value);
-				if (!disableWithSelection) {
-					const numResults = Repository.entities.length;
-					if (!numResults) {
-						setSelection([]);
-					} else if (numResults === 1) {
-						const selection = Repository.entities[0];
-						setSelection([selection]);
-						setSavedSearch(null);
-					}
-				}
+				setNewEntityDisplayValue(value); // capture the search query so we can tell Grid what to use for a new entity's displayValue
 			
 			} else {
+				throw Error('Not yet implemented');
+
 				// Search through data
 				found = _.find(data, (item) => {
 					if (_.isString(item[displayIx]) && _.isString(value)) {
@@ -335,23 +338,64 @@ export function ComboComponent(props) {
 					}
 					return item[displayIx] === value;
 				});
-				if (found) {
-					const
-						newSelection = [found],
-						newTextValue = getDisplayValuesFromSelection(newSelection);
+				// if (found) {
+				// 	const
+				// 		newSelection = [found];
 
-					setTextValue(newTextValue);
-					if (!disableWithSelection) {
-						setSelection(newSelection);
+				// 	setTextInputValue(newTextValue);
+				// }
+			}
+		},
+		getDisplayValue = () => {
+			return displayValueRef.current;
+		},
+		setDisplayValue = async (value) => {
+			let displayValue = '';
+			if (_.isNil(value)) {
+				// do nothing
+			} else if (_.isArray(value)) {
+				displayValue = [];
+				if (Repository) {
+					if (!Repository.isLoaded) {
+						throw Error('Not yet implemented'); // Would a Combo ever have multiple remote selections? Shouldn't that be a Tag field??
+					}
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
 					}
+					displayValue = _.each(value, (id) => {
+						const entity = Repository.getById(id);
+						if (entity) {
+							displayValue.push(entity.displayValue)
+						}
+					});
 				} else {
-					if (value === '') { // Text field was cleared, so clear selection
-						if (!disableWithSelection) {
-							setSelection([]);
+					displayValue = _.each(value, (id) => {
+						const item = _.find(data, (datum) => datum[idIx] === id);
+						if (item) {
+							displayValue.push(item[displayIx]);
+						}
+					});
+				}
+				displayValue = displayValue.join(', ');
+			} else {
+				if (Repository) {
+					let entity;
+					if (!Repository.isLoaded) {
+						entity = await Repository.getSingleEntityFromServer(value);
+					} else {
+						if (Repository.isLoading) {
+							await Repository.waitUntilDoneLoading();
 						}
+						entity = Repository.getById(value);
 					}
+					displayValue = entity?.displayValue || '';
+				} else {
+					const item = _.find(data, (datum) => datum[idIx] === id);
+					displayValue = (item && item[displayIx]) || '';
 				}
 			}
+
+			displayValueRef.current = displayValue;
 		};
 
 	useEffect(() => {
@@ -365,27 +409,40 @@ export function ComboComponent(props) {
 
 	}, [isRendered]);
 
-	if (!disableWithSelection) {
-		useEffect(() => {
-			if (getIsManuallyEnteringText() && getSavedSearch()) {
-				return
+	useEffect(() => {
+		(async () => {
+			setIsSearchMode(false);
+			await setDisplayValue(value);
+			resetInputTextValue();
+			if (!isReady) {
+				setIsReady(true);
 			}
+		})();
+	}, [value]);
 
-			// Adjust text input to match selection
-			let localTextValue = getDisplayValuesFromSelection(selection);
-			if (!_.isEqual(localTextValue, textValue)) {
-				setTextValue(localTextValue);
-			}
-			setIsManuallyEnteringText(false);
-		}, [selection]);
+	if (!isReady) {
+		return null;
 	}
 
-
 	const refProps = {};
 	if (tooltipRef) {
 		refProps.ref = tooltipRef;
 	}
 
+	const gridProps = _.pick(props, [
+		'Editor',
+		'model',
+		'Repository',
+		'data',
+		'idIx',
+		'displayIx',
+		'value',
+		'disableView',
+		'disableCopy',
+		'disableDuplicate',
+		'disablePrint',
+	]);
+
 	const WhichGrid = isEditor ? WindowedGridEditor : Grid;
 	
 	let comboComponent = <Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={() => setIsRendered(true)}>
@@ -424,17 +481,17 @@ export function ComboComponent(props) {
 											_focus={{
 												bg: styles.FORM_COMBO_INPUT_FOCUS_BG,
 											}}
-										>{textValue}</Text>
+										>{textInputValue}</Text>
 									</Pressable> :
 									<Input
 										ref={inputRef}
-										value={textValue}
+										value={textInputValue}
 										autoSubmit={true}
 										isDisabled={isDisabled}
 										onChangeValue={onInputChangeText}
 										onKeyPress={onInputKeyPress}
+										onFocus={onInputFocus}
 										onBlur={onInputBlur}
-										onClick={onInputClick}
 										onLayout={(e) => {
 											// On web, this is not needed, but on RN it might be, so leave it in for now
 											const {
@@ -447,15 +504,6 @@ export function ComboComponent(props) {
 											setTop(top + height);
 											setLeft(left);
 										}}
-										// onFocus={(e) => {
-										// 	if (isBlocked.current) {
-										// 		return;
-										// 	}
-										// 	if (!isRendered) {
-										// 		return;
-										// 	}
-										// 	showMenu();
-										// }}
 										flex={1}
 										h="100%"
 										m={0}
@@ -535,20 +583,66 @@ export function ComboComponent(props) {
 													};
 												}}
 												autoAdjustPageSizeToHeight={false}
-												{...props}
+												{...gridProps}
+												reference="dropdownGrid"
+												parent={self}
 												h={styles.FORM_COMBO_MENU_HEIGHT + 'px'}
+												newEntityDisplayValue={newEntityDisplayValue}
 												disablePresetButtons={!isEditor}
-												setSelection={(selection) => {
-													// Decorator fn to add local functionality
-													// Close the menu when row is selected on grid
-													setSelection(selection);
-													if (hideMenuOnSelection) {
+												onChangeSelection={(selection) => {
+													if (selection[0]?.isPhantom) {
+														// do nothing
+														return;
+													}
+
+													setGridSelection(selection);
+
+													// When we first open the menu, we try to match the selection to the value, ignore this
+													if (selection[0]?.displayValue === getDisplayValue()) {
+														return;
+													}
+
+													// when user selected the record matching the current value, kill search mode
+													if (selection[0]?.id === value) {
+														setIsSearchMode(false);
+														resetInputTextValue();
+														if (hideMenuOnSelection) {
+															hideMenu();
+														}
+														return;
+													}
+
+													setValue(selection[0]?.id);
+
+													if (_.isEmpty(selection)) {
+														return;
+													}
+
+													if (hideMenuOnSelection && !isEditor) {
 														hideMenu();
 													}
+
 												}}
-												selectionMode={selectionMode}
-												setValue={(value) => {
-													setValue(value);
+												onSave={(selection) => {
+													const entity = selection[0];
+													if (entity?.id !== value) {
+														// Either a phantom record was just solidified into a real record, or a new (non-phantom) record was added.
+														// Select it and set the value of the combo.
+														setGridSelection([entity]);
+														const id = entity.id;
+														setValue(id);
+													}
+												}}
+												onRowPress={(item, e) => {
+													if (onRowPress) {
+														onRowPress(item, e);
+														return;
+													}
+													const id = Repository ? item.id : item[idIx];
+													if (id === value) {
+														hideMenu();
+														onInputFocus();
+													}
 												}}
 											/>
 										</Popover.Body>
@@ -565,9 +659,9 @@ export function ComboComponent(props) {
 }
 
 export const Combo = withComponent(
-						withData(
-							withValue(
-								withSelection(
+						withAlert(
+							withData(
+								withValue(
 									ComboComponent
 								)
 							)

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

@@ -25,7 +25,6 @@ function ValueBox(props) {
 			onView,
 			onDelete,
 		} = props;
-
 	return <Row
 				borderWidth={1}
 				borderColor="trueGray.400"
@@ -43,7 +42,7 @@ function ValueBox(props) {
 					onPress={onView}
 					h="100%"
 				/>
-				<Text color="trueGray.600">{text}</Text>
+				<Text color="trueGray.600" mr={onDelete ? 0 : 2}>{text}</Text>
 				{onDelete &&
 					<IconButton
 						_icon={{
@@ -83,9 +82,15 @@ function TagComponent(props) {
 			const
 				id = item.id,
 				repository = propsToPass.Repository;
+			if (!repository.isLoaded) {
+				await repository.load();
+			}
+			if (repository.isLoading) {
+				await repository.waitUntilDoneLoading();
+			}
 			let record = repository.getById(id); // first try to get from entities in memory
 			if (!record && repository.getSingleEntityFromServer) {
-				record = await repository.getSingleEntityFromServer(id); // TODO: Build this
+				record = await repository.getSingleEntityFromServer(id);
 			}
 
 			if (!record) {
@@ -135,24 +140,42 @@ function TagComponent(props) {
 		}),
 		WhichCombo = isEditor ? ComboEditor : Combo;
 
+	const sizeProps = {};
+	if (!props.flex && !props.w) {
+		sizeProps.flex = 1;
+	} else {
+		if (props.w) {
+			sizeProps.w = props.w;
+		}
+		if (props.flex) {
+			sizeProps.flex = props.flex;
+		}
+	}
+
 	return <>
-				<Column w="100%" flex={1}>
-					{!_.isEmpty(valueBoxes) && 
-						<Row
-							w="100%"
-							borderWidth={1}
-							borderColor="trueGray.300"
-							borderRadius="md"
-							bg="trueGray.100"
-							p={1}
-							mb={1}
-							flexWrap="wrap"
-						>{valueBoxes}</Row>}
-					<WhichCombo
-						Repository={props.Repository}
-						Editor={props.Editor}
-						onRowPress={onAdd}
-					/>
+				<Column
+					{...props}
+					{...sizeProps}
+					px={0}
+					py={0}
+				>
+					<Row
+						w="100%"
+						borderWidth={1}
+						borderColor="trueGray.300"
+						borderRadius="md"
+						bg="trueGray.100"
+						p={1}
+						mb={1}
+						minHeight={10}
+						flexWrap="wrap"
+					>{valueBoxes}</Row>
+					{isEditor && 
+						<WhichCombo
+							Repository={props.Repository}
+							Editor={props.Editor}
+							onRowPress={onAdd}
+						/>}
 				</Column>
 				{isViewerShown && 
 					<Modal
@@ -162,6 +185,9 @@ function TagComponent(props) {
 						<Editor
 							editorType={EDITOR_TYPE__WINDOWED}
 							{...propsToPass}
+							px={0}
+							py={0}
+							w="100%"
 							parent={self}
 							reference="viewer"
 

package/src/Components/Form/FieldSet.js

@@ -29,7 +29,7 @@ export default function FieldSet(props) {
 		forceUpdate = useForceUpdate(),
 		childRefs = useRef([]),
 		isAllCheckedRef = useRef(false),
-		[localIsCollapsed, setLocalIsCollapsed] = useState(isCollapsed),
+		[isLocalCollapsed, setIsLocalCollapsed] = useState(isCollapsed),
 		getIsAllChecked = () => {
 			return isAllCheckedRef.current;
 		},
@@ -38,7 +38,7 @@ export default function FieldSet(props) {
 			forceUpdate();
 		},
 		onToggleCollapse = () => {
-			setLocalIsCollapsed(!localIsCollapsed);
+			setIsLocalCollapsed(!isLocalCollapsed);
 		},
 		onToggleAllChecked = () => {
 			const bool = !getIsAllChecked();
@@ -82,6 +82,7 @@ export default function FieldSet(props) {
 				bg={styles.FORM_FIELDSET_BG}
 				mb={4}
 				pb={1}
+				pr={4}
 				{...propsToPass}
 			>
 				{title &&
@@ -119,7 +120,7 @@ export default function FieldSet(props) {
 													</Row>}
 						{isCollapsible && <IconButton
 												_icon={{
-													as: localIsCollapsed ? <CaretDown /> : <CaretUp />,
+													as: isLocalCollapsed ? <CaretDown /> : <CaretUp />,
 													size: 'sm',
 													color: 'trueGray.300',
 												}}
@@ -127,7 +128,7 @@ export default function FieldSet(props) {
 											/>}
 					</Row>}
 				{helpText && <Text>{helpText}</Text>}
-				{!localIsCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
+				{!isLocalCollapsed && <FieldSetContext.Provider value={{ registerChild, onChangeValue, }}>
 											{children}
 										</FieldSetContext.Provider>}
 			</Box>;

package/src/Components/Form/Form.js

@@ -439,6 +439,9 @@ function Form(props) {
 												name={name}
 												value={value}
 												onChangeValue={(newValue) => {
+													if (newValue === undefined) {
+														newValue = null; // React Hook Form doesn't respond well when setting value to undefined
+													}
 													onChange(newValue);
 													if (onEditorChange) {
 														onEditorChange(newValue, formSetValue, formGetValues, formState);
@@ -452,21 +455,21 @@ function Form(props) {
 												{...propsToPass}
 												{...editorTypeProps}
 											/>;
-							if (error) {
-								if (editorType !== EDITOR_TYPE__INLINE) {
-									let message = error.message;
+							if (editorType !== EDITOR_TYPE__INLINE) {
+								let message = null;
+								if (error) {
+									message = error.message;
 									if (label) {
 										message = message.replace(error.ref.name, label);
 									}
-									element = <Column pt={1} flex={1}>
-												{element}
-												<Text color="#f00">{message}</Text>
-											</Column>;
-								} else {
-									debugger;
-
-
 								}
+								if (message) {
+									message = <Text color="#f00">{message}</Text>;
+								}
+								element = <Column pt={1} flex={1}>
+											{element}
+											{message}
+										</Column>;
 							}
 
 							if (item.additionalEditButtons) {
@@ -573,17 +576,24 @@ function Form(props) {
 
 	useEffect(() => {
 		if (!Repository) {
-			return () => {};
+			return () => {
+				if (!_.isNil(editorStateRef)) {
+					editorStateRef.current = null; // clean up the editorStateRef on unmount
+				}
+			};
 		}
 
 		Repository.ons(['changeData', 'change'], forceUpdate);
 
 		return () => {
 			Repository.offs(['changeData', 'change'], forceUpdate);
+			if (!_.isNil(editorStateRef)) {
+				editorStateRef.current = null; // clean up the editorStateRef on unmount
+			}
 		};
 	}, [Repository]);
 
-	// if (Repository && (!record || _.isEmpty(record))) {
+	// if (Repository && (!record || _.isEmpty(record) || record.isDestroyed)) {
 	// 	return null;
 	// }
 
@@ -622,7 +632,14 @@ function Form(props) {
 		additionalButtons,
 		isSaveDisabled = false,
 		isSubmitDisabled = false,
-		savingProps = {};
+		savingProps = {},
+
+		showDeleteBtn = false,
+		showResetBtn = false,
+		showCloseBtn = false,
+		showCancelBtn = false,
+		showSaveBtn = false,
+		showSubmitBtn = false;
 
 	if (containerWidth) { // we need to render this component twice in order to get the container width. Skip this on first render
 		
@@ -678,7 +695,7 @@ function Form(props) {
 			isSaveDisabled = true;
 			isSubmitDisabled = true;
 		}
-		if (_.isEmpty(formState.dirtyFields) && !record?.isRemotePhantom) {
+		if (_.isEmpty(formState.dirtyFields) && !record?.isPhantom) {
 			isSaveDisabled = true;
 		}
 
@@ -688,6 +705,34 @@ function Form(props) {
 			footerProps.alignItems = 'flex-start';
 		}
 
+		if (onDelete && editorMode === EDITOR_MODE__EDIT && isSingle) {
+			showDeleteBtn = true;
+		}
+		if (!isEditorViewOnly) {
+			showResetBtn = true;
+		}
+		if (editorType !== EDITOR_TYPE__SIDE) { // side editor won't show either close or cancel buttons!
+			// determine whether we should show the close or cancel button
+			if (isEditorViewOnly) {
+				showCloseBtn = true;
+			} else {
+				if (formState.isDirty || record?.isPhantom) {
+					if (isSingle && onCancel) {
+						showCancelBtn = true;
+					}
+				} else {
+					if (onClose) {
+						showCloseBtn = true;
+					}
+				}
+			}
+		}
+		if (!isEditorViewOnly && onSave) {
+			showSaveBtn = true;
+		}
+		if (!!onSubmit) {
+			showSubmitBtn = true;
+		}
 	}
 	
 	return <Column {...sizeProps} onLayout={onLayoutDecorated} ref={formRef}>
@@ -712,6 +757,7 @@ function Form(props) {
 					
 					<Footer justifyContent="flex-end" {...footerProps}  {...savingProps}>
 						{onDelete && editorMode === EDITOR_MODE__EDIT && isSingle &&
+
 							<Row flex={1} justifyContent="flex-start">
 								<Button
 									key="deleteBtn"
@@ -724,7 +770,7 @@ function Form(props) {
 								>Delete</Button>
 							</Row>}
 
-						{!isEditorViewOnly && 
+						{showResetBtn && 
 							<IconButton
 								key="resetBtn"
 								onPress={() => {
@@ -735,34 +781,38 @@ function Form(props) {
 								}}
 								icon={<Rotate color="#fff" />}
 							/>}
-						{!isEditorViewOnly && isSingle && onCancel &&
+
+						{showCancelBtn &&
 							<Button
 								key="cancelBtn"
 								variant="ghost"
 								onPress={onCancel}
 								color="#fff"
 							>Cancel</Button>}
-						{!isEditorViewOnly && onSave && 
+							
+						{showCloseBtn && 
+							<Button
+								key="closeBtn"
+								variant="ghost"
+								onPress={onClose}
+								color="#fff"
+							>Close</Button>}
+
+						{showSaveBtn && 
 							<Button
 								key="saveBtn"
 								onPress={(e) => handleSubmit(onSaveDecorated, onSubmitError)(e)}
 								isDisabled={isSaveDisabled}
 								color="#fff"
 							>{editorMode === EDITOR_MODE__ADD ? 'Add' : 'Save'}</Button>}
-						{onSubmit && 
+						
+						{showSubmitBtn && 
 							<Button
 								key="submitBtn"
 								onPress={(e) => handleSubmit(onSubmitDecorated, onSubmitError)(e)}
 								isDisabled={isSubmitDisabled}
 								color="#fff"
 							>{submitBtnLabel || 'Submit'}</Button>}
-			
-						{isEditorViewOnly && onClose && editorType !== EDITOR_TYPE__SIDE && 
-							<Button
-								key="closeBtn"
-								onPress={onClose}
-								color="#fff"
-							>Close</Button>}
 					
 						{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
 							return <Button

package/src/Components/Hoc/withEditor.js

@@ -35,6 +35,8 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				},
 				record,
 				onChange,
+				onSave,
+				newEntityDisplayValue,
 
 				// withComponent
 				self,
@@ -57,6 +59,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			} = props,
 			listeners = useRef({}),
 			editorStateRef = useRef(),
+			newEntityDisplayValueRef = useRef(),
 			[currentRecord, setCurrentRecord] = useState(null),
 			[isAdding, setIsAdding] = useState(false),
 			[isSaving, setIsSaving] = useState(false),
@@ -81,6 +84,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				listeners.current = obj;
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the listeners in every child render
 			},
+			getNewEntityDisplayValue = () => {
+				return newEntityDisplayValueRef.current;
+			},
 			onAdd = async () => {
 				const defaultValues = Repository.getSchema().getDefaultValues();
 				let addValues = _.clone(defaultValues);
@@ -89,6 +95,11 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					addValues[selectorId] = selectorSelected.id;
 				}
 
+				if (getNewEntityDisplayValue()) {
+					const displayPropertyName = Repository.getSchema().model.displayProperty;
+					addValues[displayPropertyName] = getNewEntityDisplayValue();
+				}
+
 				if (getListeners().onBeforeAdd) {
 					const listenerResult = await getListeners().onBeforeAdd();
 					if (listenerResult === false) {
@@ -116,6 +127,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				// Unmap the values, so we can input true originalData
 				addValues = Repository.unmapData(addValues);
 
+
 				setIsAdding(true);
 				setIsSaving(true);
 				const entity = await Repository.add(addValues, false, true);
@@ -260,6 +272,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					entity = selection[0],
 					id = entity.id;
 				const result = await Repository._send('POST', Model + '/duplicate', { id });
+				if (!result) {
+					return;
+				}
 				const {
 					root,
 					success,
@@ -273,15 +288,22 @@ export default function withEditor(WrappedComponent, isTree = false) {
 
 				const duplicateId = root.id;
 
+				// TODO: I don't like this.
+				// Currently, we filter the repository by only the new Entity, then select the entity for editing.
+				// There is a 2-second delay between filtering and being able to select, and this is unacceptable.
+				// Why do we filter for just the new entity? Because it's not guaranteed to show up in the grid based on sorting.
+				// Can't we just manually add this record to the repository at the top and then edit it?
+
 				// Filter the grid with only the duplicate's ID, and open it for editing.
 				self.filterById(duplicateId, () => { // because of the way useFilters is made, we have to use a callback, not await a Promise.
 
 					// Select the only node
 					const duplicateEntity = Repository.getById(duplicateId);
-					self.setSelection([duplicateEntity]);
+					setTimeout(() => {
+						setSelection([duplicateEntity]);
 
-					// edit it
-					onEdit();
+						onEdit();
+					}, 2000); // we need this delay!
 
 				});
 
@@ -326,6 +348,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				if (onChange) {
 					onChange();
 				}
+				if (onSave) {
+					onSave(what);
+				}
 
 				return true;
 			},
@@ -339,7 +364,6 @@ export default function withEditor(WrappedComponent, isTree = false) {
 					}
 					
 					setIsAdding(false);
-					setEditorMode(EDITOR_MODE__VIEW);
 					setIsEditorShown(false);
 				}
 				const formState = editorStateRef.current;
@@ -350,6 +374,9 @@ export default function withEditor(WrappedComponent, isTree = false) {
 				}
 			},
 			onEditorClose = () => {
+				if (isAdding) {
+					onEditorCancel();
+				}
 				setIsEditorShown(false);
 			},
 			onEditorDelete = async () => {
@@ -406,6 +433,7 @@ export default function withEditor(WrappedComponent, isTree = false) {
 			self.deleteChildren = onDeleteChildren;
 			self.duplicate = onDuplicate;
 		}
+		newEntityDisplayValueRef.current = newEntityDisplayValue;
 
 		if (lastSelection !== selection) {
 			// NOTE: If I don't calculate this on the fly for selection changes,

package/src/Components/Hoc/withSelection.js

@@ -228,6 +228,9 @@ export default function withSelection(WrappedComponent) {
 			conformSelectionToValue = async () => {
 				let newSelection = [];
 				if (Repository) {
+					if (Repository.isLoading) {
+						await Repository.waitUntilDoneLoading();
+					}
 					// Get entity or entities that match value
 					if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
 						if (_.isArray(value)) {
@@ -236,16 +239,16 @@ export default function withSelection(WrappedComponent) {
 							let found = Repository.getById(value);
 							if (found) {
 								newSelection.push(found);
-							} else if (Repository?.isRemote && Repository?.entities.length) {
+							// } else if (Repository?.isRemote && Repository?.entities.length) {
 
-								// Value cannot be found in Repository, but actually exists on server
-								// Try to get this value from the server directly
-								Repository.filter(Repository.schema.model.idProperty, value);
-								await Repository.load();
-								found = Repository.getById(value);
-								if (found) {
-									newSelection.push(found);
-								}
+							// 	// Value cannot be found in Repository, but actually exists on server
+							// 	// Try to get this value from the server directly
+							// 	Repository.filter(Repository.schema.model.idProperty, value);
+							// 	await Repository.load();
+							// 	found = Repository.getById(value);
+							// 	if (found) {
+							// 		newSelection.push(found);
+							// 	}
 
 							}
 						}
@@ -278,9 +281,6 @@ export default function withSelection(WrappedComponent) {
 			};
 
 		useEffect(() => {
-			if (isReady) {
-				return () => {};
-			}
 
 			(async () => {
 
@@ -291,7 +291,7 @@ export default function withSelection(WrappedComponent) {
 					await Repository.load();
 				}
 
-				if (usesWithValue && !_.isNil(value)) {
+				if (!_.isNil(value)) {
 
 					await conformSelectionToValue();
 
@@ -314,7 +314,7 @@ export default function withSelection(WrappedComponent) {
 
 			})();
 
-		}, []);
+		}, [value]);
 
 		if (self) {
 			self.selection = localSelection;

package/src/Components/Hoc/withValue.js

@@ -109,7 +109,7 @@ export default function withValue(WrappedComponent) {
 				setLocalValue(value);
 			}
 		}, [value]);
-
+		
 		if (fieldSetRegisterChild) {
 			useEffect(() => {
 				fieldSetRegisterChild({

package/src/Components/Toolbar/Pagination.js

@@ -69,6 +69,18 @@ export default function Pagination(props) {
 							isDisabled={isDisabled}
 							tooltip="Show More"
 						>Show More</Button>);
+			if (!Repository.isLocal) {
+				items.push(<IconButton
+								key="reload"
+								parent={self}
+								reference="reloadPageBtn"
+								{...iconButtonProps}
+								icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+								onPress={() => Repository.reload()}
+								tooltip="Reload"
+								ml={2}
+							/>);
+			}
 		} else {
 			isDisabled = page === 1;
 			items.push(<IconButton

package/src/Components/Viewer/Viewer.js

@@ -183,6 +183,7 @@ function Viewer(props) {
 										flex={1}
 										h={350}
 										canEditorViewOnly={true}
+										canCrud={false}
 										uniqueRepository={true}
 										parent={self}
 										{...propsToPass}

package/src/Components/index.js

@@ -41,7 +41,6 @@ import RadioGroup from './Form/Field/RadioGroup/RadioGroup.js';
 import SquareButton from './Buttons/SquareButton.js';
 import TabPanel from './Panel/TabPanel.js';
 import Tag from './Form/Field/Tag/Tag.js';
-import TagViewer from './Viewer/TagViewer.js';
 import TextArea from './Form/Field/TextArea.js';
 import Text from './Form/Field/Text.js';
 import TimezonesCombo from './Form/Field/Combo/TimezonesCombo.js';
@@ -94,7 +93,6 @@ const components = {
 	SquareButton,
 	TabPanel,
 	Tag,
-	TagViewer,
 	Text,
 	TextArea,
 	TimezonesCombo,

package/src/Components/Viewer/TagViewer.js

@@ -1,30 +0,0 @@
-import {
-	Text,
-} from 'native-base';
-import UiGlobals from '../../UiGlobals.js';
-import withComponent from '../Hoc/withComponent.js';
-import _ from 'lodash';
-
-function TagViewer(props) {
-	const {
-			value,
-		} = props,
-		parsedValue = value ? JSON.parse(value) : null,
-		values = parsedValue ? _.map(parsedValue, (val) => {
-			const ret = val?.text;
-			return ret;
-		}).join(', ') : [],
-		styles = UiGlobals.styles;
-
-	return <Text
-				numberOfLines={1}
-				ellipsizeMode="head"
-				fontSize={styles.FORM_TEXT_FONTSIZE}
-				minHeight='40px'
-				px={3}
-				py={2}
-				{...props}
-			>{values}</Text>;
-}
-
-export default withComponent(TagViewer);