@onehat/ui 0.3.167 → 0.3.170

package/package.json

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

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

@@ -43,6 +43,7 @@ export function ComboComponent(props) {
 			hideMenuOnSelection = true,
 			showXButton = false,
 			showEyeButton = false,
+			viewerProps = {}, // popup for eyeButton
 			_input = {},
 			isEditor = false,
 			isDisabled = false,
@@ -593,7 +594,7 @@ export function ComboComponent(props) {
 
 	if (UiGlobals.mode === UI_MODE_REACT_NATIVE) {
 		// This input and trigger are for show
-		// The just show the current getDisplayValue and open the menu
+		// They just show the current getDisplayValue and open the menu
 		const displayValue = getDisplayValue();
 		inputAndTrigger = <>
 							<Pressable
@@ -607,6 +608,7 @@ export function ComboComponent(props) {
 								bg={styles.FORM_COMBO_INPUT_BG}
 								m={0}
 								p={2}
+								h="100%"
 							>
 								{inputIconElement}
 								<Text
@@ -738,7 +740,17 @@ export function ComboComponent(props) {
 						}
 
 					}}
-					onAdd={onGridAdd}
+					onAdd={(entity) => {
+						if (entity?.id !== value && !isInTag) {
+							// Select it and set the value of the combo.
+							setGridSelection([entity]);
+							const id = entity.id;
+							setValue(id);
+						}
+						if (onGridAdd) {
+							onGridAdd([entity]);
+						}
+					}}
 					onSave={(selection) => {
 						const entity = selection[0];
 						if (entity?.id !== value && !isInTag) { // Tag doesn't use value, so don't do this comparison in the Tag
@@ -915,7 +927,7 @@ export function ComboComponent(props) {
 		// be responsive for small screen sizes and bump additionalButtons to the next line
 		assembledComponents = 
 			<Column>
-				<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1}>
+				<Row {...refProps} justifyContent="center" alignItems="center" flex={1}>
 					{xButton}
 					{eyeButton}
 					{inputAndTrigger}
@@ -927,7 +939,7 @@ export function ComboComponent(props) {
 			</Column>;
 	} else {
 		assembledComponents = 
-			<Row {...refProps} justifyContent="center" alignItems="center" h={styles.FORM_COMBO_HEIGHT} flex={1} onLayout={onLayout}>
+			<Row {...refProps} justifyContent="center" alignItems="center" flex={1} onLayout={onLayout}>
 				{xButton}
 				{eyeButton}
 				{inputAndTrigger}
@@ -963,13 +975,13 @@ export function ComboComponent(props) {
 						<Editor
 							{...propsForViewer}
 							editorType={EDITOR_TYPE__WINDOWED}
+							isEditorViewOnly={true}
+							{...viewerProps}
 							px={0}
 							py={0}
 							w="100%"
 							parent={self}
 							reference="viewer"
-
-							isEditorViewOnly={true}
 							selection={viewerSelection}
 							onEditorClose={onViewerClose}
 						/>