refact(kt-field): refact label to reduce field interactivity

Co-Authored-By: Carol Soliman <[email protected]>

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',

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',

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',

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',

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([

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([

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,
 			),

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.string(),
+			})
 		export type Props = z.output<typeof schema>
 	}
 

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)

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

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,14 @@
 
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
-import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import {
+	Ref,
+	computed,
+	defineComponent,
+	onMounted,
+	ref,
+	watch,
+} from '@vue/composition-api'
 import { z } from 'zod'
 
 import { KtField } from '../../kotti-field'
@@ -151,8 +159,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 +271,7 @@ export default defineComponent({
 			isDropdownOpen,
 			isFieldFocused,
 			isFieldHovered,
+			ktFieldRef,
 			onOptionsInput: (value: MultiValue) => {
 				if (props.isMultiple) {
 					field.setValue(value)
@@ -297,7 +316,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)

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,
 	}
 }

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)