fix(KtFieldInlineEdit): don't expose the input event

packages/documentation/pages/usage/components/field-inline-edit.vue

@@ -4,21 +4,16 @@
 
 		<div class="element-example white">
 			<KtForm v-model="formValue">
-				<!-- v-model="fieldValue" -->
+				<!-- v-model="confirmedValue" -->
 				<KtFieldInlineEdit
 					v-bind="fieldProps"
 					class="mb-16px"
-					formKey="fieldValue"
-					@confirm="onConfirm"
+					formKey="confirmedValue"
 				/>
-				<div class="overview__component__value mb-8px">
-					<strong>Value:</strong>
-					<span v-text="JSON.stringify(fieldValue)" />
-					<a @click="reset">reset</a>
-				</div>
 				<div class="overview__component__value mb-16px">
 					<strong>Confirmed Value:</strong>
 					<span v-text="JSON.stringify(confirmedValue)" />
+					<a @click="reset">reset</a>
 				</div>
 			</KtForm>
 			<KtForm v-model="settings" size="small">
@@ -106,7 +101,7 @@ export default defineComponent({
 		KtFieldSingleSelect,
 	},
 	setup() {
-		const getInitialValue = () => ({ fieldValue: null })
+		const getInitialValue = () => ({ confirmedValue: null })
 
 		const settings = ref<{
 			booleanFlags: {
@@ -146,19 +141,17 @@ export default defineComponent({
 			validation: 'empty',
 		})
 
-		const formValue = ref<{ fieldValue: KottiFieldInlineEdit.Value }>(
+		const formValue = ref<{ confirmedValue: KottiFieldInlineEdit.Value }>(
 			getInitialValue(),
 		)
-		const fieldValue = computed(() => formValue.value.fieldValue)
-		// const fieldValue = ref<Kotti.FieldInlineEdit.Value>(null)
+		const confirmedValue = computed(() => formValue.value.confirmedValue)
 
-		const confirmedValue = ref<KottiFieldInlineEdit.Value>(fieldValue.value)
+		// const confirmedValue = ref<KottiFieldInlineEdit.Value>(null)
 
 		return {
 			component: KtFieldInlineEdit,
 			confirmedValue,
 			formValue,
-			fieldValue,
 			fieldProps: computed(() => ({
 				dataTest: settings.value.dataTest,
 				helpDescription: settings.value.helpDescription,
@@ -181,9 +174,6 @@ export default defineComponent({
 					text: 'Some validation text',
 				}),
 			})),
-			onConfirm: (newVal: Kotti.FieldInlineEdit.Events.Confirm) => {
-				confirmedValue.value = newVal
-			},
 			preventConfirmationOptions: ref(
 				Object.entries(Kotti.FieldInlineEdit.ConfirmationValidation).map(
 					([label, value]) => ({
@@ -197,8 +187,7 @@ export default defineComponent({
 			),
 			reset: () => {
 				formValue.value = getInitialValue()
-				// fieldValue.value = null
-				confirmedValue.value = null
+				// confirmedValue.value = null
 			},
 			settings,
 			textStyleOptions: ref([

packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue

@@ -82,12 +82,6 @@ export default defineComponent({
 			supports: KOTTI_FIELD_INLINE_EDIT_SUPPORTS,
 		})
 
-		useAdjustHeight({
-			field,
-			inputRef,
-			props,
-		})
-
 		const fieldPlaceholder = computed(() =>
 			props.isReadonly
 				? null
@@ -100,6 +94,7 @@ export default defineComponent({
 		}
 
 		const preEditingValue = ref<KottiFieldInlineEdit.Value>(field.currentValue)
+		const editingValue = ref<KottiFieldInlineEdit.Value>(preEditingValue.value)
 
 		const updateIsEditing = (shouldEdit: typeof isEditing.value) => {
 			if (shouldEdit && props.isReadonly) {
@@ -123,6 +118,16 @@ export default defineComponent({
 			updateIsEditing,
 		})
 
+		const currentValue = computed(() =>
+			isEditing.value ? editingValue.value : field.currentValue,
+		)
+
+		useAdjustHeight({
+			inputRef,
+			props,
+			currentValue,
+		})
+
 		watch(
 			() => field.currentValue,
 			(newValue) => {
@@ -137,16 +142,16 @@ export default defineComponent({
 				return
 			}
 
-			emit('confirm', field.currentValue)
+			setFieldValue(editingValue.value)
 
-			preEditingValue.value = field.currentValue
+			preEditingValue.value = editingValue.value
 
 			updateIsEditing(false)
 			blurField(fieldRef.value)
 		}
 
 		const onCancel = () => {
-			setFieldValue(preEditingValue.value)
+			editingValue.value = preEditingValue.value
 
 			updateIsEditing(false)
 
@@ -222,7 +227,7 @@ export default defineComponent({
 				...field.inputProps,
 				forceUpdateKey: forceUpdateKey.value,
 				placeholder: fieldPlaceholder.value ?? '',
-				value: field.currentValue ?? '',
+				value: currentValue.value ?? '',
 			}),
 		)
 
@@ -251,7 +256,7 @@ export default defineComponent({
 
 				const newValue = event.target.value
 
-				setFieldValue(newValue)
+				editingValue.value = newValue
 			},
 			onEnter: (
 				event: KeyboardEvent & {

packages/kotti-ui/source/kotti-field-inline-edit/hooks.ts

@@ -1,4 +1,4 @@
-import { Ref, computed, watch } from '@vue/composition-api'
+import { ComputedRef, Ref, computed, watch } from '@vue/composition-api'
 
 import { KottiField } from '../kotti-field/types'
 import { Nullable } from '../types/utilities'
@@ -7,18 +7,17 @@ import { FieldInlineEditElement, KottiFieldInlineEdit } from './types'
 import { resizeTextArea } from './utils'
 
 export const useAdjustHeight = ({
-	field,
 	inputRef: _inputRef,
+	currentValue,
 	props,
 }: {
-	field: KottiField.Hook.Returns<KottiFieldInlineEdit.Value>
 	inputRef: Ref<Nullable<FieldInlineEditElement>>
+	currentValue: ComputedRef<KottiFieldInlineEdit.Value>
 	props: KottiFieldInlineEdit.PropsInternal
 }) => {
 	if (!props.isMultiline) return
 	// Typecast needed because the type is logically implied from props.isMultiline being true
 	const inputRef = _inputRef as Ref<HTMLTextAreaElement | null>
-	const currentValue = computed(() => field.currentValue)
 
 	watch(
 		() => [

packages/kotti-ui/source/kotti-field-inline-edit/types.ts

@@ -33,11 +33,6 @@ export namespace KottiFieldInlineEdit {
 	export type Props = z.input<typeof propsSchema>
 	export type PropsInternal = z.output<typeof propsSchema>
 
-	export namespace Events {
-		export type Confirm = KottiFieldInlineEdit.Value
-		export type Cancel = KottiFieldInlineEdit.Value
-	}
-
 	export type Translations = {
 		placeholder: string
 	}