feat(fixes unit entry): specify characters you want to reject from te…

…ra-input (#4463)

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>

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) => {