WIP

3YOURMIND · Apr 24, 2022 · b5c13cb · b5c13cb
1 parent 5ca866a
commit b5c13cb
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
@@ -757,7 +757,7 @@ export default defineComponent({
 				isLoading: false,
 				isOptional: true,
 			},
-			component: 'KtFieldSingleSelectRemote',
+			component: 'KtFieldMultiSelectRemote',
 			decimalSeparator: Kotti.DecimalSeparator.DOT,
 			hasHelpTextSlot: false,
 			helpDescription: null,

diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue
@@ -82,6 +82,7 @@
 <script lang="ts">
 import { Yoco } from '@3yourmind/yoco'
 import { computed, defineComponent, ref, watch } from '@vue/composition-api'
+import Vue from 'vue'
 import { z } from 'zod'
 
 import { KtField } from '../../kotti-field'
@@ -191,6 +192,8 @@ export default defineComponent<
 		)
 
 		watch(isUserInteracting, (newValue) => {
+			console.info('isUserInteracting watcher')
+
 			if (props.isRemote) {
 				if (!newValue && props.query !== null) emit(UPDATE_QUERY, null)
 			} else localQuery.value = null
@@ -212,24 +215,36 @@ export default defineComponent<
 								o.label.toLowerCase().includes(localQuery.value.toLowerCase()),
 					  ),
 			),
-			handleInputBlur: (event: { relatedTarget: HTMLElement }) => {
-				const blurToElement = event.relatedTarget
-				if (
-					!isTippyOrInTippy(blurToElement, selectTippy.tippyContentRef.value)
-				) {
-					selectTippy.setIsDropdownOpen(false)
-				}
-
-				isInputFocused.value = false
+			handleInputBlur: async (event: { relatedTarget: HTMLElement }) => {
+				setTimeout(async () => {
+					console.info('handleInputBlur')
+
+					const blurToElement = event.relatedTarget
+					if (
+						!isTippyOrInTippy(blurToElement, selectTippy.tippyContentRef.value)
+					) {
+						await Vue.nextTick()
+						console.info('handleInputBlur close')
+						selectTippy.setIsDropdownOpen(false)
+					}
+
+					console.info('handleInputBlur remove isInputFocused')
+					isInputFocused.value = false
+				}, 500) // 100 isn’t enough...
 			},
-			handleInputClick: () => {
+			handleInputClick: async () => {
+				console.info('handleInputClick')
+
+				await Vue.nextTick()
+				console.info('handleInputClick open')
+				// always show the dropdown if the input was clicked
+				selectTippy.setIsDropdownOpen(true)
+				await Vue.nextTick()
+				console.info('handleInputClick focus')
 				inputRef.value?.focus()
-				setTimeout(() => {
-					// always show the dropdown if the input was clicked
-					selectTippy.setIsDropdownOpen(true)
-				}, 100)
 			},
 			handleInputFocus: () => {
+				console.info('handleInputFocus')
 				// always show the dropdown if the input was focused
 				selectTippy.setIsDropdownOpen(true)
 				isInputFocused.value = true
@@ -276,6 +291,8 @@ export default defineComponent<
 						: [field.currentValue as SingleValue]
 			}),
 			removeTag: (value: Shared.Option['value']) => {
+				console.info('removeTag', value)
+
 				if (!props.isMultiple)
 					throw new Error(
 						'GenericSelectField: Unexpected multi function on single select',

diff --git a/packages/kotti-ui/source/kotti-field-select/todo.md b/packages/kotti-ui/source/kotti-field-select/todo.md
@@ -2,3 +2,10 @@
 - [ ] restore arrow-key navigation for options (isHovered)
 - [ ] (optional) add slot support for options
 - [ ] FIX: if field is multi and not empty and not interacting, hide input
+
+## 2022-04-20
+
+- 500ms delay on blur works but 100ms doesn’t...
+- Consider <https://stackoverflow.com/a/38317768> and setting tippy to manual mode...
+- Honestly, the most realistic and sustainable solution is to either move the search query inside the dropdown or to not show the tags
+- Consider making `isInputVisible` delayed when closing so that it only updates after 500ms