Merge pull request #966 from 3YOURMIND/fix-kt-field-inline-edit-resiz…

…e-issue fix(KtFieldInlineEdit): wait for dom to render before calculationg height
3YOURMIND · Jul 15, 2024 · 8b1852d · 8b1852d
2 parents e31fc67 + cd50916
commit 8b1852d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue b/packages/kotti-ui/source/kotti-field-inline-edit/KtFieldInlineEdit.vue
@@ -329,6 +329,7 @@ export default defineComponent({
 	/* stylelint-disable-next-line selector-class-pattern */
 	::v-deep .kt-field__input-container__slot {
 		display: flex;
+		gap: var(--unit-2);
 		align-items: center;
 	}
 

diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/components/EditIcon.vue b/packages/kotti-ui/source/kotti-field-inline-edit/components/EditIcon.vue
@@ -1,5 +1,5 @@
 <template>
-	<span :class="rootClasses" :tabindex="-1" v-text="Yoco.Icon.EDIT" />
+	<div :class="rootClasses" :tabindex="-1" v-text="Yoco.Icon.EDIT" />
 </template>
 
 <script lang="ts">
@@ -27,7 +27,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .kt-field-inline-edit__edit-icon {
 	display: flex;
-	padding-right: var(--unit-2);
+	font-size: var(--unit-4);
 
 	&--disabled {
 		color: var(--text-05);

diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/hooks.ts b/packages/kotti-ui/source/kotti-field-inline-edit/hooks.ts
@@ -21,7 +21,7 @@ export const useAdjustHeight = ({
 	const currentValue = computed(() => field.currentValue)
 
 	onMounted(() => {
-		if (inputRef.value) resizeField({ inputRef: inputRef.value })
+		if (inputRef.value) void resizeField({ inputRef: inputRef.value })
 	})
 
 	watch(
@@ -33,7 +33,7 @@ export const useAdjustHeight = ({
 			props.textStyle,
 		],
 		() => {
-			if (inputRef.value) resizeField({ inputRef: inputRef.value })
+			if (inputRef.value) void resizeField({ inputRef: inputRef.value })
 		},
 		{ immediate: true },
 	)

diff --git a/packages/kotti-ui/source/kotti-field-inline-edit/utils.ts b/packages/kotti-ui/source/kotti-field-inline-edit/utils.ts
@@ -1,12 +1,16 @@
+import { nextTick } from 'vue'
 import type { FieldInlineEditElement } from './types'
 
-export const resizeField = ({
+export const resizeField = async ({
 	inputRef,
 }: {
 	inputRef: FieldInlineEditElement | null
-}): void => {
+}): Promise<void> => {
 	inputRef?.setAttribute('style', 'height: auto')
 
+	// ensure that DOM has updated properly before scrollHeight is retrieved
+	await nextTick()
+
 	const scrollHeight = inputRef?.scrollHeight ?? null
 
 	if (scrollHeight === null)