@onehat/ui 0.4.34 → 0.4.37

package/package.json

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

package/src/Components/Editor/Editor.js

@@ -15,7 +15,9 @@ function Editor(props) {
 			onEditorSave: onSave,
 			onEditorClose: onClose,
 			onEditorDelete: onDelete,
-			getEditorMode,
+			getEditorMode = () => {
+				return props.editorMode;
+			},
 			onEditMode,
 			canRecordBeEdited,
 			_viewer = {},

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

@@ -56,6 +56,7 @@ export function ComboComponent(props) {
 			isDisabled = false,
 			isInTag = false,
 			minimizeForRow = false,
+			reloadOnTrigger = false,
 			menuHeight,
 			tooltipPlacement = 'bottom',
 			placeholder,
@@ -308,11 +309,14 @@ export function ComboComponent(props) {
 			resetTextInputValue();
 			hideMenu();
 		},
-		onTriggerPress = (e) => {
+		onTriggerPress = async (e) => {
 			if (!isRendered) {
 				return;
 			}
 			clearGridFilters();
+			if (reloadOnTrigger && Repository) {
+				await Repository.reload();
+			}
 			if (isMenuShown) {
 				hideMenu();
 			} else {

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

@@ -72,6 +72,7 @@ function TagComponent(props) {
 							editorType={EDITOR_TYPE__WINDOWED}
 							parent={self}
 							reference="viewer"
+							Repository={repository}
 							isEditorViewOnly={true}
 							selection={[record]}
 							onEditorClose={hideModal}

package/src/Components/Form/Form.js

@@ -65,8 +65,7 @@ import _ from 'lodash';
 // Form is embedded on screen in some other way. Mainly use startingValues, items, validator
 
 function Form(props) {
-	const
-		{
+	const {
 			editorType = EDITOR_TYPE__WINDOWED, // EDITOR_TYPE__INLINE | EDITOR_TYPE__WINDOWED | EDITOR_TYPE__SIDE | EDITOR_TYPE__SMART | EDITOR_TYPE__PLAIN
 			startingValues = {},
 			items = [], // Columns, FieldSets, Fields, etc to define the form
@@ -81,6 +80,7 @@ function Form(props) {
 			checkIsEditingDisabled = true,
 			disableLabels = false,
 			disableDirtyIcon = false,
+			alwaysShowCancelButton = false,
 			onBack,
 			onReset,
 			onInit,
@@ -114,7 +114,7 @@ function Form(props) {
 			// withEditor
 			isEditorViewOnly = false,
 			isSaving = false,
-			getEditorMode,
+			getEditorMode = () => {},
 			onCancel,
 			onSave,
 			onClose,
@@ -247,16 +247,14 @@ function Form(props) {
 				} else {
 					// editor is not defined, fall back to property definition
 					if (isEditable) {
-						const
-							{
+						const {
 								type: t,
 								...p
 							} = propertyDef?.editorType;
 						type = t;
 						editorTypeProps = p;
 					} else if (propertyDef?.viewerType) {
-						const
-							{
+						const {
 								type: t,
 								...p
 							} =  propertyDef?.viewerType;
@@ -504,16 +502,14 @@ function Form(props) {
 			}
 			if (!type) {
 				if (isEditable) {
-					const
-						{
+					const {
 							type: t,
 							...p
 						} = propertyDef?.editorType;
 					type = t;
 					editorTypeProps = p;
 				} else if (propertyDef?.viewerType) {
-					const
-						{
+					const {
 							type: t,
 							...p
 						} =  propertyDef?.viewerType;
@@ -572,7 +568,7 @@ function Form(props) {
 					return buildFromItem(item, ix, {...defaults, ...itemDefaults});
 				});
 
-				let elementClassName = 'Form-ElementFromItem';
+				let elementClassName = 'Form-ElementFromItem gap-2';
 				const defaultsClassName = defaults.className;
 				if (defaultsClassName) {
 					elementClassName += ' ' + defaultsClassName;
@@ -790,7 +786,7 @@ function Form(props) {
 							if (item.additionalEditButtons) {
 								const buttons = buildAdditionalButtons(item.additionalEditButtons, self, { fieldState, formSetValue, formGetValues, formState });
 								if (containerWidth > styles.FORM_STACK_ROW_THRESHOLD) {
-									element = <HStack className="Form-HStack5 flex-1 flex-wrap items-center">
+									element = <HStack className="Form-HStack5 flex-1 flex-wrap items-center gap-2">
 													{element}
 													{buttons}
 												</HStack>;
@@ -1152,7 +1148,7 @@ function Form(props) {
 							</Toolbar>;
 			}
 			if (getEditorMode() === EDITOR_MODE__EDIT && !_.isEmpty(additionalButtons)) {
-				formButtons.push(<Toolbar key="additionalButtonsToolbar" className="justify-end flex-wrap">
+				formButtons.push(<Toolbar key="additionalButtonsToolbar" className="justify-end flex-wrap gap-2">
 									{additionalButtons}
 								</Toolbar>)
 			}
@@ -1175,27 +1171,31 @@ function Form(props) {
 			showResetBtn = true;
 		}
 		// determine whether we should show the close or cancel button
-		if (editorType !== EDITOR_TYPE__SIDE) {
-			if (isEditorViewOnly) {
-				showCloseBtn = true;
-			} else {
-				// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
-				// 	showCancelBtn = true;
-				// }
-				if (formState.isDirty || isPhantom) {
-					if (isSingle && onCancel) {
-						showCancelBtn = true;
-					}
+		if (alwaysShowCancelButton) {
+			showCancelBtn = true;
+		} else {
+			if (editorType !== EDITOR_TYPE__SIDE) {
+				if (isEditorViewOnly) {
+					showCloseBtn = true;
 				} else {
-					if (onClose) {
-						showCloseBtn = true;
+					// if (editorType === EDITOR_TYPE__WINDOWED && onCancel) {
+					// 	showCancelBtn = true;
+					// }
+					if (formState.isDirty || isPhantom) {
+						if (isSingle && onCancel) {
+							showCancelBtn = true;
+						}
+					} else {
+						if (onClose) {
+							showCloseBtn = true;
+						}
 					}
 				}
-			}
-		} else {
-			// side editor only
-			if (isPhantom && isSingle && onCancel) {
-				showCancelBtn = true;
+			} else {
+				// side editor only
+				if (isPhantom && isSingle && onCancel) {
+					showCancelBtn = true;
+				}
 			}
 		}
 		if (!isEditorViewOnly && onSave) {
@@ -1272,11 +1272,16 @@ function Form(props) {
 					/>}
 			
 				{additionalFooterButtons && _.map(additionalFooterButtons, (props) => {
+					let isDisabled = false;
+					if (props.disableOnInvalid) {
+						isDisabled = !formState.isValid;
+					}
 					return <Button
 								{...testProps('additionalFooterBtn-' + props.key)}
 								{...props}
 								onPress={(e) => handleSubmit(props.onPress, onSubmitError)(e)}
 								text={props.text}
+								isDisabled={isDisabled}
 							/>;
 				})}
 			</>;

package/src/Components/Grid/Grid.js

@@ -391,6 +391,7 @@ function GridComponent(props) {
 
 			let rowComponent =
 				<Pressable
+					dataSet={{ ix: index }}
 					{...testProps(getRowTestId ? getRowTestId(row) : ((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id))}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
@@ -467,7 +468,7 @@ function GridComponent(props) {
 							onContextMenu(item, e, selection);
 						}
 					}}
-					className="flex-row grow">
+					className="Pressable Row flex-row grow">
 					{({
 						hovered,
 						focused,
@@ -1182,7 +1183,7 @@ function GridComponent(props) {
 					initialNumToRender={initialNumToRender}
 					initialScrollIndex={0}
 					renderItem={renderRow}
-					className="FlatList bg-grey-100"
+					className="bg-grey-100"
 					{...flatListProps}
 				/>;
 	

package/src/Components/Grid/GridRow.js

@@ -319,7 +319,7 @@ function GridRow(props) {
 			rowClassName += ' border-4 border-[#0ff]';
 		}
 		return <HStackNative
-					{...testProps('row' + (isSelected ? '-selected' : ''))}
+					{...testProps('Row ' + (isSelected ? 'row-selected' : ''))}
 					{...rowProps}
 					key={hash}
 					className={rowClassName}

package/src/Components/Hoc/Secondary/withSecondaryEditor.js

@@ -13,6 +13,7 @@ import {
 	EDITOR_TYPE__SIDE,
 	EDITOR_TYPE__INLINE,
 } from '../../../Constants/Editor.js';
+import useForceUpdate from '../../../Hooks/useForceUpdate.js'
 import Button from '../../Buttons/Button.js';
 import UiGlobals from '../../../UiGlobals.js';
 import _ from 'lodash';
@@ -27,7 +28,6 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			return <WrappedComponent {...props} ref={ref} isTree={isTree} />;
 		}
 
-		let [secondaryEditorMode, secondarySetEditorMode] = useState(EDITOR_MODE__VIEW); // Can change below, so use 'let'
 		const {
 				secondaryUserCanEdit = true, // not permissions, but capability
 				secondaryUserCanView = true,
@@ -72,6 +72,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				// withSecondarySelection
 				secondarySelection,
+				secondaryGetSelection,
 				secondarySetSelection,
 
 				// withAlert
@@ -79,17 +80,25 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				confirm,
 				hideAlert,
 			} = props,
+			forceUpdate = useForceUpdate(),
 			secondaryListeners = useRef({}),
 			secondaryEditorStateRef = useRef(),
 			secondaryNewEntityDisplayValueRef = useRef(),
+			secondaryEditorModeRef = useRef(EDITOR_MODE__VIEW),
+			secondaryIsIgnoreNextSelectionChangeRef = useRef(false),
 			secondaryModel = SecondaryRepository?.schema?.name,
 			[secondaryCurrentRecord, secondarySetCurrentRecord] = useState(null),
 			[secondaryIsAdding, setIsAdding] = useState(false),
 			[secondaryIsSaving, setIsSaving] = useState(false),
 			[secondaryIsEditorShown, secondarySetIsEditorShownRaw] = useState(false),
 			[secondaryIsEditorViewOnly, setIsEditorViewOnly] = useState(secondaryCanEditorViewOnly), // current state of whether editor is in view-only mode
-			[secondaryIsIgnoreNextSelectionChange, setSecondaryIsIgnoreNextSelectionChange] = useState(false),
 			[secondaryLastSelection, setLastSelection] = useState(),
+			secondarySetIsIgnoreNextSelectionChange = (bool) => {
+				secondaryIsIgnoreNextSelectionChangeRef.current = bool;
+			},
+			secondaryGetIsIgnoreNextSelectionChange = () => {
+				return secondaryIsIgnoreNextSelectionChangeRef.current;
+			},
 			secondarySetIsEditorShown = (bool) => {
 				secondarySetIsEditorShownRaw(bool);
 				if (!bool && secondaryOnEditorClose) {
@@ -100,8 +109,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				function doIt() {
 					secondarySetSelection(newSelection);
 				}
-				const formState = secondaryEditorStateRef.current;
-				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== secondarySelection && secondaryEditorMode === EDITOR_MODE__EDIT) {
+				const
+					formState = secondaryEditorStateRef.current,
+					secondarySelection = secondaryGetSelection();
+				if (!_.isEmpty(formState?.dirtyFields) && newSelection !== secondarySelection && secondaryGetEditorMode() === EDITOR_MODE__EDIT) {
 					confirm('This record has unsaved changes. Are you sure you want to cancel editing? Changes will be lost.', doIt);
 				} else if (secondarySelection && secondarySelection[0] && !secondarySelection[0].isDestroyed && (secondarySelection[0]?.isPhantom || secondarySelection[0]?.isRemotePhantom)) {
 					confirm('This new record is unsaved. Are you sure you want to cancel editing? Changes will be lost.', async () => {
@@ -119,6 +130,15 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				secondaryListeners.current = obj;
 				// forceUpdate(); // we don't want to get into an infinite loop of renders. Simply directly assign the secondaryListeners in every child render
 			},
+			secondaryGetEditorMode = () => {
+				return secondaryEditorModeRef.current;
+			},
+			secondarySetEditorMode = (mode) => {
+				if (secondaryEditorModeRef.current !== mode) {
+					secondaryEditorModeRef.current = mode;
+					forceUpdate();
+				}
+			},
 			getNewEntityDisplayValue = () => {
 				return secondaryNewEntityDisplayValueRef.current;
 			},
@@ -128,6 +148,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					return;
 				}
 
+				const secondarySelection = secondaryGetSelection();
 				let addValues = values;
 
 				if (SecondaryRepository?.isLoading) {
@@ -202,7 +223,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				setIsSaving(true);
 				const entity = await SecondaryRepository.add(addValues, false, true);
 				setIsSaving(false);
-				setSecondaryIsIgnoreNextSelectionChange(true);
+				secondarySetIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([entity]);
 				if (getListeners().onAfterAdd) {
 					await getListeners().onAfterAdd(entity);
@@ -225,6 +246,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(EDIT, secondaryModel);
 					return;
 				}
+				const secondarySelection = secondaryGetSelection();
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
@@ -247,6 +269,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				if (_.isFunction(args)) {
 					cb = args;
 				}
+				const secondarySelection = secondaryGetSelection();
 				if (_.isEmpty(secondarySelection) || (_.isArray(secondarySelection) && (secondarySelection.length > 1 || secondarySelection[0]?.isDestroyed))) {
 					return;
 				}
@@ -305,6 +328,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					showPermissionsError(DELETE, secondaryModel);
 					return;
 				}
+				const secondarySelection = secondaryGetSelection();
 				if (getListeners().onBeforeDelete) {
 					const listenerResult = await getListeners().onBeforeDelete(secondarySelection);
 					if (listenerResult === false) {
@@ -345,6 +369,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for view
 				
+				const secondarySelection = secondaryGetSelection();
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -367,7 +392,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 
 				// check permissions for duplicate
 
-
+				const secondarySelection = secondaryGetSelection();
 				if (secondarySelection.length !== 1) {
 					return;
 				}
@@ -381,29 +406,32 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					rawValues = _.omit(entity.getOriginalData(), idProperty);
 				rawValues.id = null; // unset the id of the duplicate
 				const duplicate = await SecondaryRepository.add(rawValues, false, true);
-				setSecondaryIsIgnoreNextSelectionChange(true);
+				secondarySetIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([duplicate]);
 				secondarySetEditorMode(EDITOR_MODE__EDIT);
 				secondarySetIsEditorShown(true);
 			},
 			onRemoteDuplicate = async () => {
 				const
+					secondarySelection = secondaryGetSelection(),
 					entity = secondarySelection[0],
 					duplicateEntity = await SecondaryRepository.remoteDuplicate(entity);
 
-				setSecondaryIsIgnoreNextSelectionChange(true);
+				secondarySetIsIgnoreNextSelectionChange(true);
 				secondarySetSelection([duplicateEntity]);
 				secondaryDoEdit();
 			},
 			secondaryDoEditorSave = async (data, e) => {
-				let mode = secondaryEditorMode === EDITOR_MODE__ADD ? ADD : EDIT;
+				let mode = secondaryGetEditorMode() === EDITOR_MODE__ADD ? ADD : EDIT;
 				if (canUser && !canUser(mode, secondaryModel)) {
 					showPermissionsError(mode, secondaryModel);
 					return;
 				}
 
 				// NOTE: The Form submits onSave for both adds (when not isAutoSsave) and edits.
-				const isSingle = secondarySelection.length === 1;
+				const
+					secondarySelection = secondaryGetSelection(),
+					isSingle = secondarySelection.length === 1;
 				let useStaged = false;
 				if (isSingle) {
 					// just update this one entity
@@ -450,7 +478,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					if (secondaryOnChange) {
 						secondaryOnChange(secondarySelection);
 					}
-					if (secondaryEditorMode === EDITOR_MODE__ADD) {
+					if (secondaryGetEditorMode() === EDITOR_MODE__ADD) {
 						if (secondaryOnAdd) {
 							await secondaryOnAdd(secondarySelection);
 						}
@@ -463,7 +491,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 						} else {
 							secondarySetEditorMode(EDITOR_MODE__VIEW);
 						}
-					} else if (secondaryEditorMode === EDITOR_MODE__EDIT) {
+					} else if (secondaryGetEditorMode() === EDITOR_MODE__EDIT) {
 						if (getListeners().onAfterEdit) {
 							await getListeners().onAfterEdit(secondarySelection);
 						}
@@ -479,6 +507,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			secondaryDoEditorCancel =  () => {
 				async function doIt() {
 					const
+						secondarySelection = secondaryGetSelection(),
 						isSingle = secondarySelection.length === 1,
 						isPhantom = secondarySelection[0] && !secondarySelection[0]?.isDestroyed && secondarySelection[0].isPhantom;
 					if (isSingle && isPhantom) {
@@ -517,9 +546,10 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondarySetIsEditorShown(false);
 				});
 			},
-			calculateEditorMode = (secondaryIsIgnoreNextSelectionChange = false) => {
+			calculateEditorMode = () => {
 			
-				let doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
+				let secondaryIsIgnoreNextSelectionChange = secondaryGetIsIgnoreNextSelectionChange(),
+					doStayInEditModeOnSelectionChange = secondaryStayInEditModeOnSelectionChange;
 				if (!_.isNil(UiGlobals.stayInEditModeOnSelectionChange)) {
 					// allow global override to for this property
 					doStayInEditModeOnSelectionChange = UiGlobals.stayInEditModeOnSelectionChange;
@@ -529,13 +559,14 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 				}
 			
 				// calculateEditorMode gets called only on selection changes
+				const secondarySelection = secondaryGetSelection();
 				let mode;
 				if (secondaryEditorType === EDITOR_TYPE__SIDE && !_.isNil(UiGlobals.isSideEditorAlwaysEditMode) && UiGlobals.isSideEditorAlwaysEditMode) {
 					// special case: side editor is always edit mode
 					mode = EDITOR_MODE__EDIT;
 				} else {
 					if (secondaryIsIgnoreNextSelectionChange) {
-						mode = secondaryEditorMode;
+						mode = secondaryGetEditorMode();
 						if (!secondaryCanEditorViewOnly && secondaryUserCanEdit) {
 							if (secondarySelection.length > 1) {
 								if (!secondaryDisableEdit) {
@@ -581,9 +612,9 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			};
 
 		useEffect(() => {
-			secondarySetEditorMode(calculateEditorMode(secondaryIsIgnoreNextSelectionChange));
+			secondarySetEditorMode(calculateEditorMode());
 
-			setSecondaryIsIgnoreNextSelectionChange(false);
+			secondarySetIsIgnoreNextSelectionChange(false);
 			setLastSelection(secondarySelection);
 		}, [secondarySelection]);
 	
@@ -602,7 +633,7 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 			// NOTE: If I don't calculate this on the fly for selection changes,
 			// we see a flash of the previous state, since useEffect hasn't yet run.
 			// (basically redo what's in the useEffect, above)
-			secondaryEditorMode = calculateEditorMode(secondaryIsIgnoreNextSelectionChange);
+			secondarySetEditorMode(calculateEditorMode());
 		}
 
 		return <WrappedComponent
@@ -615,11 +646,12 @@ export default function withSecondaryEditor(WrappedComponent, isTree = false) {
 					secondaryIsEditorViewOnly={secondaryIsEditorViewOnly}
 					secondaryIsAdding={secondaryIsAdding}
 					secondaryIsSaving={secondaryIsSaving}
-					secondaryEditorMode={secondaryEditorMode}
+					secondaryEditorMode={secondaryGetEditorMode()}
 					secondaryOnEditMode={secondarySetEditMode}
 					secondaryOnViewMode={secondarySetViewMode}
 					secondaryEditorStateRef={secondaryEditorStateRef}
 					secondarySetIsEditorShown={secondarySetIsEditorShown}
+					secondarySetIsIgnoreNextSelectionChange={secondarySetIsIgnoreNextSelectionChange}
 					secondaryOnAdd={(!secondaryUserCanEdit || secondaryDisableAdd) ? null : secondaryDoAdd}
 					secondaryOnEdit={(!secondaryUserCanEdit || secondaryDisableEdit) ? null : secondaryDoEdit}
 					secondaryOnDelete={(!secondaryUserCanEdit || secondaryDisableDelete) ? null : secondaryDoDelete}

package/src/Components/Hoc/Secondary/withSecondarySelection.js

@@ -1,18 +1,18 @@
-import { useState, useEffect, } from 'react';
+import { forwardRef, useState, useEffect, useRef, } from 'react';
 import {
 	SELECTION_MODE_SINGLE,
 	SELECTION_MODE_MULTI,
 	SELECT_UP,
 	SELECT_DOWN,
 } from '../../../Constants/Selection.js';
+import useForceUpdate from '../../../Hooks/useForceUpdate.js';
 import inArray from '../../../Functions/inArray.js';
 import _ from 'lodash';
 
 // NOTE: This is a modified version of @onehat/ui/src/Hoc/withSelection
-// This HOC will eventually get out of sync with that one, and may need to be updated.
 
 export default function withSelection(WrappedComponent) {
-	return (props) => {
+	return forwardRef((props, ref) => {
 
 		if (props.secondaryDisableWithSelection) {
 			return <WrappedComponent {...props} />;
@@ -25,8 +25,7 @@ export default function withSelection(WrappedComponent) {
 			return <WrappedComponent {...props} />;
 		}
 
-		const
-			{
+		const {
 				secondarySelection,
 				secondaryDefaultSelection,
 				secondaryOnChangeSelection,
@@ -49,20 +48,25 @@ export default function withSelection(WrappedComponent) {
 			} = props,
 			usesWithValue = !!secondarySetValue,
 			initialSelection = secondarySelection || secondaryDefaultSelection || [],
-			[secondaryLocalSelection, setLocalSelection] = useState(initialSelection),
+			forceUpdate = useForceUpdate(),
+			secondarySelectionRef = useRef(initialSelection),
 			[isReady, setIsReady] = useState(secondarySelection || false), // if secondarySelection is already defined, or secondaryValue is not null and we don't need to load repository, it's ready
 			secondarySetSelection = (secondarySelection) => {
-				if (_.isEqual(secondarySelection, secondaryLocalSelection)) {
+				if (_.isEqual(secondarySelection, secondaryGetSelection())) {
 					return;
 				}
 
-				setLocalSelection(secondarySelection);
+				secondarySelectionRef.current = secondarySelection;
 				if (secondaryOnChangeSelection) {
 					secondaryOnChangeSelection(secondarySelection);
 				}
 				if (fireEvent) {
 					fireEvent('secondaryChangeSelection', secondarySelection);
 				}
+				forceUpdate();
+			},
+			secondaryGetSelection = () => {
+				return secondarySelectionRef.current;
 			},
 			secondarySelectPrev = () => {
 				secondarySelectDirection(SELECT_UP);
@@ -103,21 +107,21 @@ export default function withSelection(WrappedComponent) {
 				}
 			},
 			secondaryAddToSelection = (item) => {
-				const newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+				const newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
 				newSelection.push(item);
 				secondarySetSelection(newSelection);
 			},
 			secondaryRemoveFromSelection = (item) => {
 				let newSelection = [];
 				if (SecondaryRepository) {
-					newSelection = _.remove(secondaryLocalSelection, (sel) => sel !== item);
+					newSelection = _.remove(secondaryGetSelection(), (sel) => sel !== item);
 				} else {
-					newSelection = _.remove(secondaryLocalSelection, (sel) => sel[secondaryIdIx] !== item[secondaryIdIx]);
+					newSelection = _.remove(secondaryGetSelection(), (sel) => sel[secondaryIdIx] !== item[secondaryIdIx]);
 				}
 				secondarySetSelection(newSelection);
 			},
 			secondaryDeselectAll = () => {
-				if (!_.isEmpty(secondaryLocalSelection)) {
+				if (!_.isEmpty(secondaryGetSelection())) {
 					secondarySetSelection([]);
 				}
 			},
@@ -128,7 +132,7 @@ export default function withSelection(WrappedComponent) {
 				// That way, after a load event, we'll keep the same selection, if possible.
 				const
 					newSelection = [],
-					ids = _.map(secondaryLocalSelection, (item) => item.id);
+					ids = _.map(secondaryGetSelection(), (item) => item.id);
 				_.each(ids, (id) => {
 					const found = SecondaryRepository.getById(id);
 					if (found) {
@@ -162,9 +166,9 @@ export default function withSelection(WrappedComponent) {
 			secondarySelectRangeTo = (item) => {
 				// Select above max or below min to this one
 				const
-					currentSelectionLength = secondaryLocalSelection.length,
+					currentSelectionLength = secondaryGetSelection().length,
 					index = getIndexOfSelectedItem(item);
-				let newSelection = _.clone(secondaryLocalSelection); // so we get a new object, so descendants rerender
+				let newSelection = _.clone(secondaryGetSelection()); // so we get a new object, so descendants rerender
 
 				if (currentSelectionLength) {
 					const { items, max, min, } = getMaxMinSelectionIndices();
@@ -191,10 +195,10 @@ export default function withSelection(WrappedComponent) {
 			},
 			secondaryIsInSelection = (item) => {
 				if (SecondaryRepository) {
-					return inArray(item, secondaryLocalSelection);
+					return inArray(item, secondaryGetSelection());
 				}
 
-				const found = _.find(secondaryLocalSelection, (selectedItem) => {
+				const found = _.find(secondaryGetSelection(), (selectedItem) => {
 						return selectedItem[secondaryIdIx] === item[secondaryIdIx];
 					});
 				return !!found;
@@ -216,10 +220,10 @@ export default function withSelection(WrappedComponent) {
 				return found;
 			},
 			secondaryGetIdsFromLocalSelection = () => {
-				if (!secondaryLocalSelection[0]) {
+				if (!secondaryGetSelection()[0]) {
 					return null;
 				}
-				const secondaryValues = _.map(secondaryLocalSelection, (item) => {
+				const secondaryValues = _.map(secondaryGetSelection(), (item) => {
 					if (SecondaryRepository) {
 						return item.id;
 					}
@@ -303,7 +307,7 @@ export default function withSelection(WrappedComponent) {
 					}
 				}
 
-				if (!_.isEqual(newSelection, secondaryLocalSelection)) {
+				if (!_.isEqual(newSelection, secondaryGetSelection())) {
 					secondarySetSelection(newSelection);
 				}
 			};
@@ -354,7 +358,7 @@ export default function withSelection(WrappedComponent) {
 		}, [secondaryValue]);
 
 		if (self) {
-			self.secondarySelection = secondaryLocalSelection;
+			self.secondarySelection = secondaryGetSelection();
 			self.secondarySetSelection = secondarySetSelection;
 			self.secondarySelectPrev = secondarySelectPrev;
 			self.secondarySelectNext = secondarySelectNext;
@@ -395,8 +399,10 @@ export default function withSelection(WrappedComponent) {
 		
 		return <WrappedComponent
 					{...props}
+					ref={ref}
 					secondaryDisableWithSelection={false}
-					secondarySelection={secondaryLocalSelection}
+					secondarySelection={secondaryGetSelection()}
+					secondaryGetSelection={secondaryGetSelection}
 					secondarySetSelection={secondarySetSelection}
 					secondarySelectionMode={secondarySelectionMode}
 					secondarySelectPrev={secondarySelectPrev}
@@ -411,5 +417,5 @@ export default function withSelection(WrappedComponent) {
 					secondaryGetIdsFromSelection={secondaryGetIdsFromLocalSelection}
 					secondaryGetDisplayValuesFromSelection={secondaryGetDisplayValuesFromLocalSelection}
 				/>;
-	};
+	});
 }