fix(KtFieldToggle/KtField*Select*): isLoading edge cases

- prevent triggering setValue on isLoading for KtFieldToggle - prevent openning tippy on select fields on isLoading - throw on KtField if setValue is triggered while isLoading is true Co-Authored-By: Florian Wendelborn <[email protected]>
3YOURMIND · Dec 5, 2023 · 3d8e861 · 3d8e861
1 parent 75c13a1
commit 3d8e861
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
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
@@ -44,7 +44,7 @@ export const useSelectTippy = <T>(field: KottiField.Hook.Returns<T>) => {
 				isDropdownOpen.value = false
 			},
 			onShow: () => {
-				if (field.isDisabled) return false
+				if (field.isDisabled || field.isLoading) return false
 
 				// More correct here, don't move to `onShown()`
 				isDropdownMounted.value = true

diff --git a/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue b/packages/kotti-ui/source/kotti-field-toggle/KtFieldToggle.vue
@@ -72,7 +72,8 @@ export default defineComponent({
 				forceUpdateKey: forceUpdateKey.value,
 			})),
 			onInput: (newValue: boolean | undefined) => {
-				field.setValue(newValue ?? null)
+				if (!field.isDisabled && !field.isLoading)
+					field.setValue(newValue ?? null)
 
 				forceUpdate()
 			},

diff --git a/packages/kotti-ui/source/kotti-field/hooks.ts b/packages/kotti-ui/source/kotti-field/hooks.ts
@@ -70,11 +70,13 @@ const useValue = <DATA_TYPE>({
 	context,
 	emit,
 	isDisabled,
+	isLoading,
 	isEmpty,
 	props,
 }: Pick<KottiField.Hook.Parameters<DATA_TYPE>, 'emit' | 'isEmpty' | 'props'> & {
 	context: KottiForm.Context | null
 	isDisabled: Ref<boolean>
+	isLoading: Ref<boolean>
 }) => {
 	watch(
 		() => props.formKey,
@@ -114,7 +116,7 @@ const useValue = <DATA_TYPE>({
 		 * @param options defines forceUpdate to set value even when the field is disabled
 		 */
 		setValue: ref((newValue: unknown, options?: { forceUpdate: boolean }) => {
-			if (isDisabled.value && !options?.forceUpdate)
+			if ((isDisabled.value || isLoading.value) && !options?.forceUpdate)
 				throw new KtFieldErrors.DisabledSetValueCalled(props)
 
 			if (
@@ -256,6 +258,7 @@ export const useField = <DATA_TYPE>({
 		emit,
 		isEmpty,
 		isDisabled: sharedProperties.isDisabled,
+		isLoading: sharedProperties.isLoading,
 		props,
 	})