@onehat/ui 0.3.149 → 0.3.150

package/package.json

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

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

@@ -40,6 +40,7 @@ function TagComponent(props) {
 			setValue,
 			...propsToPass // break connection between Tag and Combo props
 		} = props,
+		valueRef = useRef(value),
 		ignoreNextComboValueChangeRef = useRef(false),
 		[isViewerShown, setIsViewerShown] = useState(false),
 		[viewerSelection, setViewerSelection] = useState([]),
@@ -138,12 +139,13 @@ function TagComponent(props) {
 			});			
 			setValue(newValue);
 		},
-		onGridAdd = (entity) => {
+		onGridAdd = (selection) => {
 			// underlying GridEditor added a record.
 			// add it to this Tag's value
 			const
+				entity = selection[0],
 				id = entity.id,
-				newValue = _.clone(value);
+				newValue = _.clone(valueRef.current);
 			newValue.push({
 				id,
 				text: entity.displayValue,
@@ -153,14 +155,14 @@ function TagComponent(props) {
 		onGridSave = (selection) => {
 			// underlying GridEditor has changed a record.
 			// Check if that value exists, and if so, update its displayValue
-			if (_.isEmpty(value)) {
+			if (_.isEmpty(valueRef.current)) {
 				return;
 			}
 
 			const
 				entity = selection[0],
 				id = entity.id,
-				ix = _.findIndex(value, (item) => {
+				ix = _.findIndex(valueRef.current, (item) => {
 					return item.id === id;
 				}),
 				isFound = ix !== -1;
@@ -168,7 +170,7 @@ function TagComponent(props) {
 				return;
 			}
 			
-			const newValue = _.clone(value);
+			const newValue = _.clone(valueRef.current);
 			newValue[ix] = {
 				id,
 				text: entity.displayValue,
@@ -178,14 +180,14 @@ function TagComponent(props) {
 		onGridDelete = (selection) => {
 			// underlying GridEditor has deleted a value.
 			// Check if that value exists, and if so delete it
-			if (_.isEmpty(value)) {
+			if (_.isEmpty(valueRef.current)) {
 				return;
 			}
 
 			const
 				entity = selection[0],
 				id = entity.id,
-				ix = _.findIndex(value, (item) => {
+				ix = _.findIndex(valueRef.current, (item) => {
 					return item.id === id;
 				}),
 				isFound = ix !== -1;
@@ -193,7 +195,7 @@ function TagComponent(props) {
 				return;
 			}
 
-			const newValue = _.filter(value, (item) => {
+			const newValue = _.filter(valueRef.current, (item) => {
 				return item.id !== id;
 			});
 			setValue(newValue);
@@ -206,6 +208,8 @@ function TagComponent(props) {
 						onDelete={!isViewOnly ? () => onDelete(val) : null}
 					/>;
 		});
+	
+	valueRef.current = value; // the onGrid* methods were dealing with stale data, so use a ref, and update it here
 
 	let WhichCombo = Combo;
 	if (_combo.isEditor) {