From 9d6200e275b6a05c9e983ba91ef0c74d36efdb7b Mon Sep 17 00:00:00 2001
From: Santiago Balladares <744091+santiagoballadares@users.noreply.github.com>
Date: Sun, 3 Dec 2023 18:36:36 +0100
Subject: [PATCH] refact(kt-field): refact label to reduce field interactivity

Co-Authored-By: Carol Soliman <17387510+carsoli@users.noreply.github.com>
---
 .../source/kotti-field-date/KtFieldDate.vue   |  1 +
 .../kotti-field-date/KtFieldDateRange.vue     |  2 +
 .../kotti-field-date/KtFieldDateTime.vue      |  1 +
 .../kotti-field-date/KtFieldDateTimeRange.vue |  2 +
 .../KtFieldFileUpload.vue                     |  5 +-
 .../KtFieldFileUploadRemote.vue               |  5 +-
 .../components/DropArea.vue                   | 21 +++++---
 .../source/kotti-field-file-upload/types.ts   | 28 +++++-----
 .../kotti-field-number/KtFieldNumber.vue      |  5 +-
 .../components/ActionIcon.vue                 |  2 +-
 .../components/GenericSelectField.vue         | 26 +++++++--
 .../hooks/use-select-tippy.ts                 | 15 ++++--
 .../kotti-field-toggle/KtFieldToggle.vue      |  7 ++-
 .../components/ToggleInner.vue                |  4 +-
 .../components/ToggleInnerSuffix.vue          |  4 +-
 .../kotti-ui/source/kotti-field/KtField.vue   | 53 +++++++++++++------
 packages/kotti-ui/source/kotti-field/hooks.ts | 12 +++++
 packages/kotti-ui/source/kotti-field/types.ts |  1 +
 18 files changed, 141 insertions(+), 53 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
index 96a266649e..86586f5b68 100644
--- a/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
+++ b/packages/kotti-ui/source/kotti-field-date/KtFieldDate.vue
@@ -90,6 +90,7 @@ export default defineComponent({
 					clearable: !field.hideClear,
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled || field.isLoading,
+					id: field.inputProps.id,
 					pickerOptions: pickerOptions.value,
 					placeholder: props.placeholder ?? '',
 					type: 'date',
diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
index ee4004a32d..70ddbba7b5 100644
--- a/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
+++ b/packages/kotti-ui/source/kotti-field-date/KtFieldDateRange.vue
@@ -4,6 +4,7 @@
 		class="kt-field-date-range"
 		:getEmptyValue="() => [null, null]"
 		:helpTextSlot="$slots.helpText"
+		isRange
 	>
 		<div
 			ref="inputContainerRef"
@@ -98,6 +99,7 @@ export default defineComponent({
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled || field.isLoading,
 					endPlaceholder: props.placeholder[1] ?? '',
+					id: [`${field.inputProps.id}-start`, `${field.inputProps.id}-end`],
 					pickerOptions: pickerOptions.value,
 					startPlaceholder: props.placeholder[0] ?? '',
 					type: 'daterange',
diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
index 10016e91da..b6a027988c 100644
--- a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
+++ b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTime.vue
@@ -91,6 +91,7 @@ export default defineComponent({
 					clearable: !field.hideClear,
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled || field.isLoading,
+					id: field.inputProps.id,
 					pickerOptions: pickerOptions.value,
 					placeholder: props.placeholder ?? '',
 					type: 'datetime',
diff --git a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
index 228ae3eabf..1c955715d6 100644
--- a/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
+++ b/packages/kotti-ui/source/kotti-field-date/KtFieldDateTimeRange.vue
@@ -4,6 +4,7 @@
 		class="kt-field-datetime-range"
 		:getEmptyValue="() => [null, null]"
 		:helpTextSlot="$slots.helpText"
+		isRange
 	>
 		<div
 			ref="inputContainerRef"
@@ -98,6 +99,7 @@ export default defineComponent({
 					'data-test': field.inputProps['data-test'],
 					disabled: field.isDisabled || field.isLoading,
 					endPlaceholder: props.placeholder?.[1] ?? '',
+					id: [`${field.inputProps.id}-start`, `${field.inputProps.id}-end`],
 					pickerOptions: pickerOptions.value,
 					startPlaceholder: props.placeholder?.[0] ?? '',
 					type: 'datetimerange',
diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue
index 5d5dc61ee7..0556812d28 100644
--- a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue
+++ b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUpload.vue
@@ -9,6 +9,7 @@
 					collapseExtensionsAfter,
 					externalUrl,
 					icon,
+					inputId,
 					tabIndex,
 				}"
 				@addFiles="onAddFiles"
@@ -24,7 +25,7 @@
 					/>
 				</template>
 			</DropArea>
-			<div v-if="filesList.length" :style="filesListStyle" @click.stop.prevent>
+			<div v-if="filesList.length" :style="filesListStyle">
 				<FileItem
 					v-for="fileInfo in filesList"
 					v-bind="{
@@ -38,7 +39,6 @@
 			<div
 				v-if="preUploadedFilesList.length"
 				:style="preUploadedFilesListStyle"
-				@click.stop.prevent
 			>
 				<PreUploadedFileItem
 					v-for="fileInfo in preUploadedFilesList"
@@ -146,6 +146,7 @@ export default defineComponent({
 			filesListStyle: computed(() =>
 				showDropArea.value ? { 'padding-top': 'var(--unit-4)' } : undefined,
 			),
+			inputId: computed(() => field.inputProps.id),
 			onAddFiles: (value: Shared.Events.AddFiles) => {
 				if (props.allowMultiple)
 					field.setValue([
diff --git a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue
index ce3e3ab471..3000c37197 100644
--- a/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue
+++ b/packages/kotti-ui/source/kotti-field-file-upload/KtFieldFileUploadRemote.vue
@@ -9,6 +9,7 @@
 					collapseExtensionsAfter,
 					externalUrl,
 					icon,
+					inputId,
 					tabIndex,
 				}"
 				@addFiles="onAddFiles"
@@ -24,7 +25,7 @@
 					/>
 				</template>
 			</DropArea>
-			<div v-if="filesList.length" :style="filesListStyle" @click.stop.prevent>
+			<div v-if="filesList.length" :style="filesListStyle">
 				<FileItemRemote
 					v-for="fileInfo in filesList"
 					v-bind="{
@@ -38,7 +39,6 @@
 			<div
 				v-if="preUploadedFilesList.length"
 				:style="preUploadedFilesListStyle"
-				@click.stop.prevent
 			>
 				<PreUploadedFileItem
 					v-for="fileInfo in preUploadedFilesList"
@@ -215,6 +215,7 @@ export default defineComponent({
 			filesListStyle: computed(() =>
 				showDropArea.value ? { 'padding-top': 'var(--unit-4)' } : undefined,
 			),
+			inputId: computed(() => field.inputProps.id),
 			onAddFiles: (value: Shared.Events.AddFiles) => {
 				if (props.allowMultiple)
 					field.setValue([
diff --git a/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue b/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue
index 454f4de203..92704a553c 100644
--- a/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue
+++ b/packages/kotti-ui/source/kotti-field-file-upload/components/DropArea.vue
@@ -3,11 +3,12 @@
 		:class="classes"
 		:data-test="dataTest ? `${dataTest}.dropArea` : undefined"
 		:tabIndex="_tabIndex"
+		@click.stop="onTriggerInput"
 		@dragleave.stop.prevent="onDragLeave"
 		@dragover.stop.prevent="onDragOver"
 		@drop.stop.prevent="onDrop"
-		@keydown.enter.stop.prevent="uploadInputRef.click()"
-		@keydown.space.stop.prevent="uploadInputRef.click()"
+		@keydown.enter.stop.prevent="onTriggerInput"
+		@keydown.space.stop.prevent="onTriggerInput"
 		@mouseenter.stop.prevent="isHovering = true"
 		@mouseleave.stop.prevent="isHovering = false"
 	>
@@ -33,11 +34,7 @@
 		<input
 			v-show="false"
 			ref="uploadInputRef"
-			:accept="accept"
-			:data-test="dataTest ? `${dataTest}.input` : undefined"
-			:disabled="isDisabled || isLoading"
-			:multiple="allowMultiple"
-			type="file"
+			v-bind="inputProps"
 			@change="onSelect"
 		/>
 		<div
@@ -110,7 +107,6 @@ export default defineComponent({
 
 		return {
 			_tabIndex: computed(() => (props.isDisabled ? -1 : props.tabIndex ?? 0)),
-			accept: computed(() => buildAcceptString(props.extensions)),
 			classes: computed(() => ({
 				'kt-field-file-upload-drop-area': true,
 				'kt-field-file-upload-drop-area--is-disabled': props.isDisabled,
@@ -122,6 +118,14 @@ export default defineComponent({
 					(isDragging.value || isHovering.value),
 			})),
 			informationText,
+			inputProps: computed(() => ({
+				accept: buildAcceptString(props.extensions),
+				'data-test': props.dataTest ? `${props.dataTest}.input` : undefined,
+				disabled: props.isDisabled || props.isLoading,
+				id: props.inputId,
+				multiple: props.allowMultiple,
+				type: 'file',
+			})),
 			isError,
 			isHovering,
 			onDragLeave: () => {
@@ -145,6 +149,7 @@ export default defineComponent({
 				const target = event.target as HTMLInputElement
 				emitFiles(target.files)
 			},
+			onTriggerInput: () => uploadInputRef.value?.click(),
 			showInformation: computed(
 				() => informationText.value || props.externalUrl,
 			),
diff --git a/packages/kotti-ui/source/kotti-field-file-upload/types.ts b/packages/kotti-ui/source/kotti-field-file-upload/types.ts
index 977192c50d..4c06198ba4 100644
--- a/packages/kotti-ui/source/kotti-field-file-upload/types.ts
+++ b/packages/kotti-ui/source/kotti-field-file-upload/types.ts
@@ -82,18 +82,22 @@ export namespace Shared {
 	}
 
 	export namespace DropArea {
-		export const schema = propsSchema.pick({
-			allowMultiple: true,
-			collapseExtensionsAfter: true,
-			dataTest: true,
-			extensions: true,
-			externalUrl: true,
-			icon: true,
-			isDisabled: true,
-			isLoading: true,
-			maxFileSize: true,
-			tabIndex: true,
-		})
+		export const schema = propsSchema
+			.pick({
+				allowMultiple: true,
+				collapseExtensionsAfter: true,
+				dataTest: true,
+				extensions: true,
+				externalUrl: true,
+				icon: true,
+				isDisabled: true,
+				isLoading: true,
+				maxFileSize: true,
+				tabIndex: true,
+			})
+			.extend({
+				inputId: z.number(),
+			})
 		export type Props = z.output<typeof schema>
 	}
 
diff --git a/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue b/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
index 3d244b078e..320996b192 100644
--- a/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
+++ b/packages/kotti-ui/source/kotti-field-number/KtFieldNumber.vue
@@ -63,7 +63,7 @@ import {
 import Big from 'big.js'
 
 import { KtField } from '../kotti-field'
-import { useField, useForceUpdate } from '../kotti-field/hooks'
+import { useFocusInput, useField, useForceUpdate } from '../kotti-field/hooks'
 import { useI18nContext } from '../kotti-i18n/hooks'
 import { KottiI18n } from '../kotti-i18n/types'
 import { makeProps } from '../make-props'
@@ -93,6 +93,7 @@ export default defineComponent({
 			supports: KOTTI_FIELD_NUMBER_SUPPORTS,
 		})
 
+		const { focusInput } = useFocusInput(field.inputProps.id)
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
 
 		const i18nContext = useI18nContext()
@@ -225,6 +226,7 @@ export default defineComponent({
 						: props.minimum ?? props.maximum ?? 0
 					: Big(field.currentValue).minus(props.step).toNumber(),
 			)
+			focusInput()
 		}
 
 		const incrementValue = () => {
@@ -237,6 +239,7 @@ export default defineComponent({
 						: props.minimum ?? props.maximum ?? 0
 					: Big(field.currentValue).add(props.step).toNumber(),
 			)
+			focusInput()
 		}
 
 		const wrapperRef = ref<HTMLDivElement | null>(null)
diff --git a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
index 94701dcda3..df4df2c662 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/ActionIcon.vue
@@ -4,7 +4,7 @@
 			v-if="showClear"
 			class="yoco"
 			role="button"
-			@click.stop="handleClear()"
+			@click.stop="handleClear"
 			v-text="Yoco.Icon.CLOSE"
 		/>
 		<i
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 99a4d7d34f..5588c6cd42 100644
--- a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
+++ b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -1,12 +1,13 @@
 <template>
 	<div :class="fieldSelectClasses">
 		<div
-			ref="tippyTriggerRef"
+			ref="tippyRef"
 			@mouseenter="isFieldHovered = true"
 			@mouseleave="isFieldHovered = false"
 		>
 			<KtField
 				v-bind="{ field }"
+				ref="ktFieldRef"
 				:getEmptyValue="() => (isMultiple ? [] : null)"
 				:helpTextSlot="helpTextSlot"
 			>
@@ -75,7 +76,13 @@
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
-import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import {
+	Ref,
+	computed,
+	defineComponent,
+	ref,
+	watch,
+} from '@vue/composition-api'
 import { z } from 'zod'
 
 import { KtField } from '../../kotti-field'
@@ -151,8 +158,18 @@ export default defineComponent({
 
 		const { forceUpdateKey, forceUpdate } = useForceUpdate()
 
+		/**
+		 * 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)
+			useSelectTippy(field, triggerTargets)
 
 		const deleteQuery = () => {
 			if (props.isRemote) {
@@ -253,6 +270,7 @@ export default defineComponent({
 			isDropdownOpen,
 			isFieldFocused,
 			isFieldHovered,
+			ktFieldRef,
 			onOptionsInput: (value: MultiValue) => {
 				if (props.isMultiple) {
 					field.setValue(value)
@@ -297,7 +315,7 @@ export default defineComponent({
 					showClear && (isFieldHovered.value || isFieldFocused.value),
 			),
 			tippyContentRef: selectTippy.tippyContentRef,
-			tippyTriggerRef: selectTippy.tippyTriggerRef,
+			tippyRef: selectTippy.tippyRef,
 			updateQuery: ({ target: { value } }: { target: HTMLInputElement }) => {
 				if (!isDropdownOpen.value) {
 					selectTippy.setIsDropdownOpen(true)
diff --git a/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
index 93efd86654..c8c7261d4a 100644
--- a/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
+++ b/packages/kotti-ui/source/kotti-field-select/hooks/use-select-tippy.ts
@@ -1,16 +1,20 @@
 import { useTippy } from '@3yourmind/vue-use-tippy'
-import { computed, inject, ref } from '@vue/composition-api'
+import { Ref, computed, inject, ref } from '@vue/composition-api'
 import castArray from 'lodash/castArray'
 import { roundArrow } from 'tippy.js'
+import { Props as TippyProps } from 'tippy.js'
 
 import { TIPPY_LIGHT_BORDER_ARROW_HEIGHT } from '../../constants'
 import { KottiField } from '../../kotti-field/types'
 import { KT_IS_IN_POPOVER } from '../../kotti-popover/constants'
 import { sameWidth } from '../utils/tippy-utils'
 
-export const useSelectTippy = <T>(field: KottiField.Hook.Returns<T>) => {
+export const useSelectTippy = <T>(
+	field: KottiField.Hook.Returns<T>,
+	triggerTargets?: Ref<TippyProps['triggerTarget']>,
+) => {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const tippyTriggerRef = ref<any | null>(null)
+	const tippyRef = ref<any | null>(null)
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	const tippyContentRef = ref<any | null>(null)
 
@@ -20,7 +24,7 @@ export const useSelectTippy = <T>(field: KottiField.Hook.Returns<T>) => {
 	const isInPopover = inject(KT_IS_IN_POPOVER, false)
 
 	const { tippy } = useTippy(
-		tippyTriggerRef,
+		tippyRef,
 		computed(() => ({
 			/**
 			 * if inside a popover, we want to stay inside the same CSS stacking context
@@ -57,6 +61,7 @@ export const useSelectTippy = <T>(field: KottiField.Hook.Returns<T>) => {
 			},
 			theme: 'light-border',
 			trigger: 'click focusin',
+			triggerTarget: triggerTargets ? triggerTargets.value : undefined,
 		})),
 	)
 
@@ -76,6 +81,6 @@ export const useSelectTippy = <T>(field: KottiField.Hook.Returns<T>) => {
 		isDropdownOpen,
 		setIsDropdownOpen,
 		tippyContentRef,
-		tippyTriggerRef,
+		tippyRef,
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue
index 4f3200fc2b..9b607b3137 100644
--- a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue
+++ b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue
@@ -10,9 +10,10 @@
 				:isDisabled="fieldProps.isDisabled"
 				:type="type"
 				:value="fieldProps.currentValue"
+				@click="onClick"
 				@input="onInput"
 			>
-				<div class="kt-field-toggle__content">
+				<div class="kt-field-toggle__content" @click="onClick">
 					<slot name="default" :value="fieldProps.currentValue" />
 					<ToggleInnerSuffix
 						v-if="showInnerSuffix"
@@ -71,6 +72,10 @@ export default defineComponent({
 				...field.inputProps,
 				forceUpdateKey: forceUpdateKey.value,
 			})),
+			onClick: () => {
+				const inputEl = document.getElementById(String(field.inputProps.id))
+				inputEl?.click()
+			},
 			onInput: (newValue: boolean | undefined) => {
 				if (!field.isDisabled && !field.isLoading)
 					field.setValue(newValue ?? null)
diff --git a/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInner.vue b/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInner.vue
index 8cd66a0db5..a29cf942ba 100644
--- a/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInner.vue
+++ b/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInner.vue
@@ -4,7 +4,9 @@
 		class="kt-field-toggle-inner"
 		:class="toggleClasses"
 	>
-		<component :is="svgComponent.is" :class="svgComponent.class" />
+		<div @click="$emit('click')">
+			<component :is="svgComponent.is" :class="svgComponent.class" />
+		</div>
 		<slot name="default" />
 		<input
 			v-bind="inputProps"
diff --git a/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInnerSuffix.vue b/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInnerSuffix.vue
index cddb21bd5f..004428c72c 100644
--- a/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInnerSuffix.vue
+++ b/packages/kotti-ui/source/kotti-field-toggle/components/ToggleInnerSuffix.vue
@@ -8,7 +8,9 @@
 			class="kt-field__header__help-text"
 			:class="iconClasses('header__help-text', ['interactive'])"
 		>
-			<FieldHelpText :helpText="helpText" :helpTextSlot="helpTextSlot" />
+			<div @click.stop.prevent>
+				<FieldHelpText :helpText="helpText" :helpTextSlot="helpTextSlot" />
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/packages/kotti-ui/source/kotti-field/KtField.vue b/packages/kotti-ui/source/kotti-field/KtField.vue
index f67cbb6abf..4274eafd17 100644
--- a/packages/kotti-ui/source/kotti-field/KtField.vue
+++ b/packages/kotti-ui/source/kotti-field/KtField.vue
@@ -1,16 +1,17 @@
 <template>
 	<div class="kt-field">
 		<component
-			:is="isGroup ? 'fieldset' : isComponent ? isComponent : 'label'"
+			:is="isGroup ? 'fieldset' : isComponent ? isComponent : 'div'"
 			:class="wrapperClasses"
 			@click="$emit('click', $event)"
 			@mousedown="$emit('mousedown', $event)"
 		>
 			<div v-if="hasLabel || hasHelpText" class="kt-field__header">
 				<component
-					:is="isGroup ? 'legend' : 'div'"
+					:is="isGroup ? 'legend' : 'label'"
 					v-if="hasLabel"
 					class="kt-field__header__label"
+					:for="inputId"
 				>
 					<span class="kt-field__header__label__text" v-text="field.label" />
 					<span :class="labelSuffixClasses" v-text="labelSuffix" />
@@ -43,7 +44,11 @@
 					<slot name="container-left" />
 				</div>
 				<slot name="container">
-					<div ref="inputContainerRef" class="kt-field__input-container">
+					<div
+						ref="inputContainerRef"
+						class="kt-field__input-container"
+						@click="focusInput"
+					>
 						<div
 							v-if="field.prefix"
 							:class="affixClasses(['left'])"
@@ -106,40 +111,40 @@
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
-import { defineComponent, computed, ref } from '@vue/composition-api'
+import { PropType, computed, defineComponent, ref } from '@vue/composition-api'
 import { VNode } from 'vue'
 
 import { useTranslationNamespace } from '../kotti-i18n/hooks'
 
 import FieldHelpText from './components/FieldHelpText.vue'
+import { useFocusInput } from './hooks'
 import { KottiField } from './types'
 
 export default defineComponent({
 	name: 'KtField',
 	components: { FieldHelpText },
 	props: {
-		field: { required: true, type: Object },
+		field: {
+			required: true,
+			type: Object as PropType<KottiField.Hook.Returns<unknown>>,
+		},
 		/**
 		 * What’s the appropriate value for an empty field of this data type?
 		 * Used when clearing the field. Most likely either null or []
 		 */
-		getEmptyValue: { default: null, type: Function },
-		helpTextSlot: { default: () => [], type: Array },
-		isComponent: { default: null, type: String },
+		getEmptyValue: { default: null, type: Function as PropType<() => unknown> },
+		helpTextSlot: { default: () => [], type: Array as PropType<VNode[]> },
+		isComponent: { default: null, type: String as PropType<string | null> },
 		isGroup: { default: false, type: Boolean },
+		isRange: { default: false, type: Boolean },
 	},
-	setup(props: {
-		field: KottiField.Hook.Returns<unknown>
-		helpTextSlot: VNode[]
-		isComponent: string | null
-		isGroup: boolean
-		getEmptyValue: () => unknown
-	}) {
+	setup(props) {
 		const validationType = computed(() => props.field.validation.type)
 		const showValidation = computed(
 			() => !(props.field.hideValidation || validationType.value === 'empty'),
 		)
 
+		const { focusInput } = useFocusInput(props.field.inputProps.id)
 		const translations = useTranslationNamespace('KtFields')
 
 		return {
@@ -149,6 +154,7 @@ export default defineComponent({
 					(modification) => `kt-field__input-container__affix--${modification}`,
 				),
 			]),
+			focusInput,
 			handleClear: () => {
 				/**
 				 * useSupports hook returns null if hideClear is not supported on ktField component
@@ -159,6 +165,7 @@ export default defineComponent({
 					)
 
 				props.field.setValue(props.getEmptyValue())
+				focusInput()
 			},
 			hasHelpText: computed(
 				() => props.helpTextSlot.length >= 1 || props.field.helpText !== null,
@@ -173,6 +180,16 @@ export default defineComponent({
 						),
 					],
 			),
+			inputId: computed(() =>
+				props.isGroup
+					? undefined
+					: props.isRange
+					? `${props.field.inputProps.id}-start`
+					: props.field.inputProps.id,
+			),
+			/**
+			 * HACK: This template ref is used by child components, refactor with caution if needed
+			 */
 			inputContainerRef: ref<Element | null>(null),
 			labelSuffix: computed(() =>
 				props.field.isOptional ? `(${translations.value.optionalLabel})` : '*',
@@ -382,6 +399,7 @@ we would be able to extend on demand instead of unscoping all field classes -->
 		// Prefix and Suffix
 		&__affix {
 			color: var(--text-02);
+			cursor: default;
 
 			&--left {
 				padding-right: 0.8rem;
@@ -412,6 +430,11 @@ we would be able to extend on demand instead of unscoping all field classes -->
 				display: flex;
 			}
 
+			&--left,
+			&--right {
+				cursor: default;
+			}
+
 			&--left {
 				transform: translateX(-0.2rem);
 			}
diff --git a/packages/kotti-ui/source/kotti-field/hooks.ts b/packages/kotti-ui/source/kotti-field/hooks.ts
index c47ba99dad..23948f689a 100644
--- a/packages/kotti-ui/source/kotti-field/hooks.ts
+++ b/packages/kotti-ui/source/kotti-field/hooks.ts
@@ -18,6 +18,8 @@ import { FORM_KEY_NONE } from './constants'
 import { KtFieldErrors } from './errors'
 import { KottiField } from './types'
 
+let ktFieldId = 1
+
 const useDecoration = <DATA_TYPE>({
 	props,
 	supports,
@@ -53,6 +55,7 @@ const useInputProps = <DATA_TYPE>({
 		inputProps: computed(() => ({
 			'data-test': props.dataTest ?? formPath.value.join('.'),
 			disabled: isDisabled.value,
+			id: ++ktFieldId,
 			tabindex: props.tabIndex,
 		})),
 	}
@@ -295,6 +298,15 @@ export const useField = <DATA_TYPE>({
 	return field
 }
 
+export const useFocusInput = (fieldId: number) => {
+	return {
+		focusInput: () => {
+			const inputEl = document.getElementById(String(fieldId))
+			inputEl?.focus()
+		},
+	}
+}
+
 /**
  * Vue doesn't support controlled input fields without explicitly re-rendering.
  * Therefore, in case nothing changed, we may need to re-render
diff --git a/packages/kotti-ui/source/kotti-field/types.ts b/packages/kotti-ui/source/kotti-field/types.ts
index 33c525226c..275fb78b0e 100644
--- a/packages/kotti-ui/source/kotti-field/types.ts
+++ b/packages/kotti-ui/source/kotti-field/types.ts
@@ -84,6 +84,7 @@ export namespace KottiField {
 				 */
 				'data-test': string
 				disabled: boolean
+				id: number
 				tabindex: KottiField.PropsInternal['tabIndex']
 			}>
 			isEmpty: boolean