@dataloop-ai/components 0.20.261-new-input.4 → 0.20.261-new-input.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.261-new-input.4",
+  "version": "0.20.261-new-input.6",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlInput/DlInput.vue

@@ -161,6 +161,7 @@
                         <dl-menu
                             v-if="showSuggestItems"
                             :model-value="isMenuOpen"
+                            :menu-class="suggestionMenuClass()"
                             persistent
                             no-focus
                             no-refocus
@@ -842,7 +843,6 @@ export default defineComponent({
         }
 
         const onAutoSuggestClick = (e: Event, item: string): void => {
-            console.log('### onAutoSuggestClick', item, e)
             if (typeof item !== 'string' || !item.trim().length) {
                 return
             }
@@ -1290,7 +1290,6 @@ export default defineComponent({
             }
         },
         onClick(e: Event, item: DlInputSuggestion) {
-            console.log('### onClick', item, e)
             this.onAutoSuggestClick(e, item.suggestion)
         },
         async handlePaste() {
@@ -1357,20 +1356,25 @@ export default defineComponent({
             this.$emit('focus', e)
         },
         blur(): void {
-            console.log('### blur')
             const inputRef = this.$refs.input as HTMLInputElement
             inputRef.blur()
         },
+        suggestionMenuClass(): string {
+            return `${this.uuid}__suggestion-menu`
+        },
+        isBlurToSuggestionMenu(e: FocusEvent): boolean {
+            const relatedTarget = e.relatedTarget as HTMLElement | null
+            return !!relatedTarget?.closest(`.${this.suggestionMenuClass()}`)
+        },
         closeSuggestionMenuAfterBlur(): void {
-            // Delay close so suggestion item click can finish before menu teardown.
-            setTimeout(() => {
-                if (!this.focused) {
-                    this.isMenuOpen = false
-                }
-            }, 0)
+            if (!this.focused) {
+                this.isMenuOpen = false
+            }
         },
-        onBlur(e: InputEvent): void {
-            console.log('### onBlur', e)
+        onBlur(e: FocusEvent): void {
+            if (this.isBlurToSuggestionMenu(e)) {
+                return
+            }
             const el = e.target as HTMLElement
             el.innerText = (el.innerText ?? '').endsWith('.')
                 ? el.innerText.slice(0, -1)
@@ -1393,7 +1397,9 @@ export default defineComponent({
             this.$emit('focus', e)
         },
         onNativeBlur(e: FocusEvent): void {
-            console.log('### onNativeBlur', e)
+            if (this.isBlurToSuggestionMenu(e)) {
+                return
+            }
             this.focused = false
             this.closeSuggestionMenuAfterBlur()
             this.$emit('blur', e)