From c50e5c7621d80d2af8fd0ae21c73b1da29669d6e Mon Sep 17 00:00:00 2001
From: Santiago Balladares <744091+santiagoballadares@users.noreply.github.com>
Date: Tue, 25 Feb 2025 15:57:26 +0100
Subject: [PATCH] fix(kotti-fields): dont emit blur event when interacting with
 the content inside the field container

---
 .../kotti-field-currency/KtFieldCurrency.vue  | 26 +++++--
 .../KtFieldInlineEdit.vue                     |  7 +-
 .../kotti-field-number/KtFieldNumber.vue      | 49 ++++--------
 .../kotti-field-password/KtFieldPassword.vue  | 25 ++++--
 .../components/GenericSelectField.vue         | 77 ++++++-------------
 .../source/kotti-field-text/KtFieldText.vue   | 21 +++--
 .../kotti-ui/source/kotti-field/KtField.vue   |  2 +-
 packages/kotti-ui/source/kotti-field/hooks.ts | 71 +++++++++++++++++
 8 files changed, 169 insertions(+), 109 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue b/packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue
index b12bed19e..c85f5b69a 100644
--- a/packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue
+++ b/packages/kotti-ui/source/kotti-field-currency/KtFieldCurrency.vue
@@ -1,6 +1,10 @@
 <template>
-	<KtField :field="modifiedField" :helpTextSlot="$slots.helpText">
-		<input ref="inputRef" v-bind="inputProps" @blur="onBlur" @input="onInput" />
+	<KtField
+		ref="ktFieldRef"
+		:field="modifiedField"
+		:helpTextSlot="$slots.helpText"
+	>
+		<input ref="inputRef" v-bind="inputProps" @input="onInput" />
 	</KtField>
 </template>
 
@@ -12,7 +16,12 @@ import type { InputHTMLAttributes } from 'vue/types/jsx'
 import { Yoco } from '@3yourmind/yoco'
 
 import { KtField } from '../kotti-field'
-import { useField, useForceUpdate } from '../kotti-field/hooks'
+import {
+	useEmitBlur,
+	useField,
+	useForceUpdate,
+	useKtFieldRef,
+} from '../kotti-field/hooks'
 import { useI18nContext } from '../kotti-i18n/hooks'
 import type { KottiI18n } from '../kotti-i18n/types'
 import { makeProps } from '../make-props'
@@ -57,6 +66,13 @@ export default defineComponent({
 		})
 
 		const i18nContext = useI18nContext()
+		const ktFieldRef = useKtFieldRef()
+
+		useEmitBlur({
+			emit,
+			field,
+			fieldTarget: computed(() => ktFieldRef.value?.inputContainerRef ?? null),
+		})
 
 		const currencyFormat = computed<KottiI18n.CurrencyMap[string]>(() => {
 			const result = i18nContext.currencyMap[props.currency]
@@ -176,13 +192,11 @@ export default defineComponent({
 				}),
 			),
 			inputRef,
+			ktFieldRef,
 			modifiedField: computed(() => ({
 				...field,
 				prefix: currencyFormat.value.symbol,
 			})),
-			onBlur: () => {
-				emit('blur', field.currentValue)
-			},
 			onInput: (event: Event) => {
 				const value = (event.target as HTMLInputElement).value
 
diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue b/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
index 18ed92b4e..e6a80d6d8 100644
--- a/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
+++ b/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
@@ -34,7 +34,6 @@
 </template>
 
 <script lang="ts">
-import type { Ref } from 'vue'
 import {
 	computed,
 	defineComponent,
@@ -49,7 +48,7 @@ import type { InputHTMLAttributes, TextareaHTMLAttributes } from 'vue/types/jsx'
 
 import { Yoco } from '@3yourmind/yoco'
 
-import { useField, useForceUpdate } from '../kotti-field/hooks'
+import { useField, useForceUpdate, useKtFieldRef } from '../kotti-field/hooks'
 import type { KottiField } from '../kotti-field/types'
 import { useTranslationNamespace } from '../kotti-i18n/hooks'
 import { makeProps } from '../make-props'
@@ -75,9 +74,7 @@ export default defineComponent({
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
 		const translations = useTranslationNamespace('KtFieldInlineEdit')
 
-		const ktFieldRef = ref<{
-			inputContainerWrapperRef: Ref<HTMLDivElement>
-		} | null>(null)
+		const ktFieldRef = useKtFieldRef()
 		const inputContainerWrapperRef = ref<HTMLDivElement | null>(null)
 		const inputRef = ref<Nullable<FieldInlineEditElement>>(null)
 
diff --git a/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue b/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
index 52786c067..81df821eb 100644
--- a/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
+++ b/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
@@ -1,5 +1,5 @@
 <template>
-	<KtField v-bind="{ field }" :helpTextSlot="$slots.helpText">
+	<KtField v-bind="{ field }" ref="ktFieldRef" :helpTextSlot="$slots.helpText">
 		<div
 			ref="wrapperRef"
 			class="kt-field-number"
@@ -11,7 +11,6 @@
 		>
 			<div
 				v-if="!hideChangeButtons"
-				ref="decrementButtonRef"
 				class="kt-field-number__button"
 				:class="decrementButtonClasses"
 				:data-test="`${inputProps['data-test']}-decrement`"
@@ -36,7 +35,6 @@
 			</div>
 			<div
 				v-if="!hideChangeButtons"
-				ref="incrementButtonRef"
 				class="kt-field-number__button"
 				:class="incrementButtonClasses"
 				:data-test="`${inputProps['data-test']}-increment`"
@@ -66,7 +64,13 @@ import type { InputHTMLAttributes } from 'vue/types/jsx'
 import { Yoco } from '@3yourmind/yoco'
 
 import { KtField } from '../kotti-field'
-import { useField, useForceUpdate, useInput } from '../kotti-field/hooks'
+import {
+	useEmitBlur,
+	useField,
+	useForceUpdate,
+	useInput,
+	useKtFieldRef,
+} from '../kotti-field/hooks'
 import type { KottiField } from '../kotti-field/types'
 import { useI18nContext } from '../kotti-i18n/hooks'
 import type { KottiI18n } from '../kotti-i18n/types'
@@ -102,8 +106,14 @@ export default defineComponent({
 
 		const { focusInput } = useInput(field.inputProps.id)
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
-
 		const i18nContext = useI18nContext()
+		const ktFieldRef = useKtFieldRef()
+
+		useEmitBlur({
+			emit,
+			field,
+			fieldTarget: computed(() => ktFieldRef.value?.inputContainerRef ?? null),
+		})
 
 		const isDecrementEnabled = computed(
 			() =>
@@ -250,29 +260,9 @@ export default defineComponent({
 		}
 
 		const wrapperRef = ref<HTMLDivElement | null>(null)
-		const incrementButtonRef = ref<HTMLDivElement | null>(null)
-		const decrementButtonRef = ref<HTMLDivElement | null>(null)
 
-		/**
-		 * last element to capture the click or focus event
-		 */
-		const lastEventTarget = ref<EventTarget | null>(null)
 		const isFieldTargeted = (target: Event['target'] | null): boolean =>
-			isOrContainsEventTarget(inputRef.value, target) ||
-			isOrContainsEventTarget(decrementButtonRef.value, target) ||
-			isOrContainsEventTarget(incrementButtonRef.value, target)
-
-		const onClickOrFocusChange = (event: Event) => {
-			if (event.target === null || props.isDisabled) return
-
-			const wasFieldTargetedBefore = isFieldTargeted(lastEventTarget.value)
-			const isFieldTargetedNow = isFieldTargeted(event.target)
-
-			if (!isFieldTargetedNow && wasFieldTargetedBefore)
-				emit('blur', field.currentValue)
-
-			lastEventTarget.value = event.target
-		}
+			isOrContainsEventTarget(inputRef.value, target)
 
 		const onKeyup = (event: KeyboardEvent) => {
 			if (!isFieldTargeted(event.target)) return
@@ -282,14 +272,10 @@ export default defineComponent({
 		}
 
 		onBeforeMount(() => {
-			window.addEventListener('click', onClickOrFocusChange, true)
-			window.addEventListener('focus', onClickOrFocusChange, true)
 			window.addEventListener('keyup', onKeyup, true)
 		})
 
 		onUnmounted(() => {
-			window.removeEventListener('click', onClickOrFocusChange)
-			window.removeEventListener('focus', onClickOrFocusChange)
 			window.removeEventListener('keyup', onKeyup)
 		})
 
@@ -297,13 +283,11 @@ export default defineComponent({
 			decrementButtonClasses: computed(() => ({
 				'kt-field-number__button--is-disabled': !isDecrementEnabled.value,
 			})),
-			decrementButtonRef,
 			decrementValue,
 			field,
 			incrementButtonClasses: computed(() => ({
 				'kt-field-number__button--is-disabled': !isIncrementEnabled.value,
 			})),
-			incrementButtonRef,
 			incrementValue,
 			inputProps: computed(
 				(): InputHTMLAttributes &
@@ -326,6 +310,7 @@ export default defineComponent({
 				}),
 			),
 			inputRef,
+			ktFieldRef,
 			onBlur: () => {
 				forceUpdateDisplayedValue(field.currentValue)
 			},
diff --git a/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue b/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
index 5e911588a..94d06d671 100644
--- a/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
+++ b/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
@@ -1,11 +1,12 @@
 <template>
 	<KtField
 		v-bind="{ field }"
+		ref="ktFieldRef"
 		:getEmptyValue="() => null"
 		:helpTextSlot="$slots.helpText"
 		@visibilityChange="handleVisibilityChange"
 	>
-		<input v-bind="inputProps" @blur="onBlur" @input="onInput" />
+		<input v-bind="inputProps" @input="onInput" />
 	</KtField>
 </template>
 
@@ -14,14 +15,17 @@ import { computed, defineComponent, ref } from 'vue'
 import type { InputHTMLAttributes } from 'vue/types/jsx'
 
 import { KtField } from '../kotti-field'
-import { useField, useForceUpdate } from '../kotti-field/hooks'
+import {
+	useEmitBlur,
+	useField,
+	useForceUpdate,
+	useKtFieldRef,
+} from '../kotti-field/hooks'
 import { makeProps } from '../make-props'
 
 import { KOTTI_FIELD_PASSWORD_SUPPORTS } from './constants'
 import { KottiFieldPassword } from './types'
 
-const VALUE_PLACEHOLDER = '•••'
-
 export default defineComponent({
 	name: 'KtFieldPassword',
 	components: { KtField },
@@ -36,6 +40,15 @@ export default defineComponent({
 		})
 		const fieldType = ref('password')
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
+		const ktFieldRef = useKtFieldRef()
+
+		useEmitBlur({
+			emit,
+			field,
+			fieldTarget: computed(() => ktFieldRef.value?.inputContainerRef ?? null),
+			valueOverride: '•••',
+		})
+
 		return {
 			field,
 			handleVisibilityChange: () => {
@@ -57,9 +70,7 @@ export default defineComponent({
 					value: field.currentValue ?? '',
 				}),
 			),
-			onBlur: () => {
-				emit('blur', field.currentValue === null ? null : VALUE_PLACEHOLDER)
-			},
+			ktFieldRef,
 			onInput: (event: Event) => {
 				const newValue = (event.target as HTMLInputElement).value
 				field.setValue(newValue === '' ? null : newValue)
diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
index 4faa1acad..060dc4418 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -51,7 +51,7 @@
 				</template>
 			</KtField>
 		</div>
-		<div :id="tippyContentId" ref="tippyContentRef">
+		<div ref="tippyContentRef">
 			<FieldSelectOptions
 				:actions="actions"
 				:dataTestPrefix="inputProps['data-test']"
@@ -75,25 +75,20 @@
 </template>
 
 <script lang="ts">
-import type { Ref } from 'vue'
-import {
-	computed,
-	defineComponent,
-	onBeforeMount,
-	onUnmounted,
-	ref,
-	watch,
-} from 'vue'
+import { computed, defineComponent, ref, watch } from 'vue'
 import { z } from 'zod'
 
 import { Yoco } from '@3yourmind/yoco'
 
 import { KtField } from '../../kotti-field'
 import { useField } from '../../kotti-field/hooks'
-import { useForceUpdate } from '../../kotti-field/hooks'
+import {
+	useEmitBlur,
+	useForceUpdate,
+	useKtFieldRef,
+} from '../../kotti-field/hooks'
 import { KtTag } from '../../kotti-tag'
 import { makeProps } from '../../make-props'
-import { isOrContainsEventTarget } from '../../utilities'
 import { KOTTI_FIELD_SELECT_SUPPORTS } from '../constants'
 import {
 	isTippyContentWrapper,
@@ -166,20 +161,14 @@ export default defineComponent({
 		const localQuery = ref<string | null>(null)
 
 		const { forceUpdateKey, forceUpdate } = useForceUpdate()
+		const ktFieldRef = useKtFieldRef()
 
-		/**
-		 * fieldLabelRef is a template ref on KtField.vue
-		 */
-		const ktFieldRef = ref<{ inputContainerRef: Ref<HTMLDivElement> } | null>(
-			null,
-		)
 		const triggerTargets = computed(() =>
 			ktFieldRef.value ? [ktFieldRef.value.inputContainerRef] : [],
 		)
 
 		const { isDropdownOpen, isDropdownMounted, ...selectTippy } =
 			useSelectTippy(field, triggerTargets)
-		const tippyContentId = `TIPPY_CONTENT_${field.inputProps.id}`
 
 		const deleteQuery = () => {
 			if (props.isRemote) {
@@ -188,46 +177,28 @@ export default defineComponent({
 		}
 
 		/**
-		 * last element to capture the click or focus event
+		 * Tippy wraps the content inside additional div elements.
+		 * So, we need to look for the actual content element.
 		 */
-		const lastEventTarget = ref<EventTarget | null>(null)
-		const isFieldTargeted = (target: Event['target'] | null): boolean =>
-			isOrContainsEventTarget(
-				ktFieldRef.value?.inputContainerRef ?? null,
-				target,
-			) || isOrContainsEventTarget(selectTippy.tippyContentRef.value, target)
-		const getEventTarget = (target: EventTarget | null): EventTarget | null => {
+		const findEventTarget = (
+			target: EventTarget | null,
+		): EventTarget | null => {
 			if (target === null || !(target instanceof HTMLElement)) return target
 
-			if (target.id === tippyContentId) return target
+			if (target === selectTippy.tippyContentRef.value) return target
 
 			return isTippyContentWrapper(target)
-				? getEventTarget((target.childNodes[0] ?? null) as EventTarget | null)
+				? findEventTarget((target.childNodes[0] ?? null) as EventTarget | null)
 				: target
 		}
-
-		const onClickOrFocusChange = (event: Event) => {
-			if (event.target === null || props.isDisabled) return
-
-			const target = getEventTarget(event.target)
-
-			const wasFieldTargetedBefore = isFieldTargeted(lastEventTarget.value)
-			const isFieldTargetedNow = isFieldTargeted(target)
-
-			if (!isFieldTargetedNow && wasFieldTargetedBefore)
-				emit('blur', field.currentValue)
-
-			lastEventTarget.value = target
-		}
-
-		onBeforeMount(() => {
-			window.addEventListener('click', onClickOrFocusChange, true)
-			window.addEventListener('focus', onClickOrFocusChange, true)
-		})
-
-		onUnmounted(() => {
-			window.removeEventListener('click', onClickOrFocusChange)
-			window.removeEventListener('focus', onClickOrFocusChange)
+		useEmitBlur({
+			emit,
+			field,
+			fieldTarget: computed(() => [
+				ktFieldRef.value?.inputContainerRef ?? null,
+				selectTippy.tippyContentRef.value,
+			]),
+			findEventTarget,
 		})
 
 		watch(
@@ -362,13 +333,13 @@ export default defineComponent({
 				field.setValue(
 					(field.currentValue as MultiValue).filter((v) => v !== value),
 				)
+				inputRef.value?.focus()
 			},
 			setIsDropdownOpen: selectTippy.setIsDropdownOpen,
 			showClearIcon: computed(
 				() => (showClear: boolean) =>
 					showClear && (isFieldHovered.value || isFieldFocused.value),
 			),
-			tippyContentId,
 			tippyContentRef: selectTippy.tippyContentRef,
 			tippyRef: selectTippy.tippyRef,
 			updateQuery: (event: Event) => {
diff --git a/packages/kotti-ui/source/kotti-field-text/KtFieldText.vue b/packages/kotti-ui/source/kotti-field-text/KtFieldText.vue
index 6fdc3115b..6da91baa5 100644
--- a/packages/kotti-ui/source/kotti-field-text/KtFieldText.vue
+++ b/packages/kotti-ui/source/kotti-field-text/KtFieldText.vue
@@ -1,10 +1,11 @@
 <template>
 	<KtField
 		v-bind="{ field }"
+		ref="ktFieldRef"
 		:getEmptyValue="() => null"
 		:helpTextSlot="$slots.helpText"
 	>
-		<input v-bind="inputProps" @blur="onBlur" @input="onInput" />
+		<input v-bind="inputProps" @input="onInput" />
 	</KtField>
 </template>
 
@@ -13,7 +14,12 @@ import { computed, defineComponent } from 'vue'
 import type { InputHTMLAttributes } from 'vue/types/jsx'
 
 import { KtField } from '../kotti-field'
-import { useField, useForceUpdate } from '../kotti-field/hooks'
+import {
+	useEmitBlur,
+	useField,
+	useForceUpdate,
+	useKtFieldRef,
+} from '../kotti-field/hooks'
 import { makeProps } from '../make-props'
 
 import { KOTTI_FIELD_TEXT_SUPPORTS } from './constants'
@@ -35,6 +41,13 @@ export default defineComponent({
 		})
 
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
+		const ktFieldRef = useKtFieldRef()
+
+		useEmitBlur({
+			emit,
+			field,
+			fieldTarget: computed(() => ktFieldRef.value?.inputContainerRef ?? null),
+		})
 
 		return {
 			field,
@@ -53,9 +66,7 @@ export default defineComponent({
 					value: field.currentValue ?? '',
 				}),
 			),
-			onBlur: () => {
-				emit('blur', field.currentValue)
-			},
+			ktFieldRef,
 			onInput: (event: Event) => {
 				const newValue = (event.target as HTMLInputElement).value
 				field.setValue(newValue === '' ? null : newValue)
diff --git a/packages/kotti-ui/source/kotti-field/KtField.vue b/packages/kotti-ui/source/kotti-field/KtField.vue
index f39e98454..3ad319ce8 100644
--- a/packages/kotti-ui/source/kotti-field/KtField.vue
+++ b/packages/kotti-ui/source/kotti-field/KtField.vue
@@ -224,7 +224,7 @@ export default defineComponent({
 			/**
 			 * HACK: This template ref is used by child components, refactor with caution if needed
 			 */
-			inputContainerRef: ref<Element | null>(null),
+			inputContainerRef: ref<HTMLDivElement | null>(null),
 			/**
 			 * HACK: This template ref is used by child components, refactor with caution if needed
 			 */
diff --git a/packages/kotti-ui/source/kotti-field/hooks.ts b/packages/kotti-ui/source/kotti-field/hooks.ts
index ba2d7b4ce..478627a58 100644
--- a/packages/kotti-ui/source/kotti-field/hooks.ts
+++ b/packages/kotti-ui/source/kotti-field/hooks.ts
@@ -3,6 +3,7 @@ import type { Ref } from 'vue'
 import {
 	computed,
 	inject,
+	onBeforeMount,
 	onMounted,
 	onUnmounted,
 	reactive,
@@ -13,6 +14,7 @@ import {
 import { KT_FORM_CONTEXT } from '../kotti-form/constants'
 import type { KottiForm } from '../kotti-form/types'
 import { useTranslationNamespace } from '../kotti-i18n/hooks'
+import { isOrContainsEventTarget } from '../utilities'
 
 import { FORM_KEY_NONE } from './constants'
 import { ktFieldErrors } from './errors'
@@ -350,3 +352,72 @@ export const useForceUpdate = (): {
 		forceUpdateKey,
 	}
 }
+
+export const useKtFieldRef = (): Ref<{
+	inputContainerRef: HTMLDivElement
+	inputContainerWrapperRef: HTMLDivElement
+} | null> => {
+	/**
+	 * both inputContainerRef and inputContainerWrapperRef
+	 * are template refs on KtField.vue
+	 */
+	const ktFieldRef = ref<{
+		inputContainerRef: Ref<HTMLDivElement>
+		inputContainerWrapperRef: Ref<HTMLDivElement>
+	} | null>(null)
+
+	return ktFieldRef
+}
+
+export const useEmitBlur = <T>({
+	emit,
+	field,
+	fieldTarget,
+	findEventTarget,
+	valueOverride,
+}: {
+	emit: (event: 'blur', value: T | null) => void
+	field: KottiField.Hook.Returns<T>
+	fieldTarget: Ref<Array<HTMLElement | null> | HTMLElement | null>
+	findEventTarget?: (target: EventTarget | null) => EventTarget | null
+	valueOverride?: T | null
+}): void => {
+	/**
+	 * last element to capture the click or focus event
+	 */
+	const lastEventTarget = ref<EventTarget | null>(null)
+
+	const isFieldTargeted = (target: Event['target'] | null): boolean =>
+		Array.isArray(fieldTarget.value)
+			? fieldTarget.value.some((ft) => isOrContainsEventTarget(ft, target))
+			: isOrContainsEventTarget(fieldTarget.value, target)
+
+	const onClickOrFocusChange = (event: Event) => {
+		if (event.target === null || field.isDisabled) return
+
+		const eventTarget = findEventTarget?.(event.target) ?? event.target
+
+		const wasFieldTargetedBefore = isFieldTargeted(lastEventTarget.value)
+		const isFieldTargetedNow = isFieldTargeted(eventTarget)
+
+		if (!isFieldTargetedNow && wasFieldTargetedBefore) {
+			if (valueOverride !== undefined) {
+				emit('blur', field.currentValue === null ? null : valueOverride)
+			} else {
+				emit('blur', field.currentValue)
+			}
+		}
+
+		lastEventTarget.value = eventTarget
+	}
+
+	onBeforeMount(() => {
+		window.addEventListener('click', onClickOrFocusChange, true)
+		window.addEventListener('focus', onClickOrFocusChange, true)
+	})
+
+	onUnmounted(() => {
+		window.removeEventListener('click', onClickOrFocusChange)
+		window.removeEventListener('focus', onClickOrFocusChange)
+	})
+}