From 744978c0c84f85f76748c1cb8c9c89316ac6e9aa Mon Sep 17 00:00:00 2001
From: Shawn Yama <syama@uncharted.software>
Date: Thu, 15 Aug 2024 09:55:28 -0400
Subject: [PATCH] feat(fixes unit entry): specify characters you want to reject
 from tera-input (#4463)

---
 .../model/model-parts/tera-model-part-entry.vue      |  9 ++-------
 .../src/components/widgets/tera-input-text.vue       | 12 +++++++++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
index 745ce51253..1650a00f1b 100644
--- a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
+++ b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
@@ -22,14 +22,9 @@
 					v-else
 					label="Unit"
 					placeholder="Add a unit"
+					:characters-to-reject="[' ']"
 					:model-value="item.unitExpression ?? ''"
-					@update:model-value="
-						($event) => {
-							const value = $event.replace(/[\s.]+/g, '');
-							$emit('update-item', { key: 'unitExpression', value });
-						}
-					"
-					@focusout="($event) => ($event.target.value = $event.target.value.replace(/[\s.]+/g, ''))"
+					@update:model-value="$emit('update-item', { key: 'unitExpression', value: $event })"
 				/>
 			</template>
 		</span>
diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
index c683ea3ee8..3834d7a323 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-text.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
-import { isString, toNumber, isNaN } from 'lodash';
+import { isString, toNumber, isNaN, isEmpty } from 'lodash';
 import { CSSProperties, computed, onMounted, ref } from 'vue';
 
 const props = defineProps<{
@@ -37,6 +37,7 @@ const props = defineProps<{
 	placeholder?: string;
 	autoWidth?: boolean;
 	autoFocus?: boolean;
+	charactersToReject?: string[];
 }>();
 
 const emit = defineEmits(['update:model-value', 'focusout', 'keyup', 'blur', 'focus', 'keypress']);
@@ -83,8 +84,13 @@ function formatValue(value: string | number | undefined) {
 
 const updateValue = (event: Event) => {
 	const target = event.target as HTMLInputElement;
-	const value = target.value;
-	emit('update:model-value', value);
+	if (props.charactersToReject && !isEmpty(props.charactersToReject)) {
+		const start = target.selectionStart;
+		const end = target.selectionEnd;
+		target.value = target.value.replace(new RegExp(`[${props.charactersToReject.join('')}]`, 'g'), ''); // Create a regex pattern from charactersToReject to remove them
+		target.setSelectionRange(start, end); // Maintain cursor position, is needed if we are entering in the middle of the input
+	}
+	emit('update:model-value', target.value);
 };
 
 const onFocus = (event) => {