From 75733c55aa5b6901ff953b7130e81ed455274aad Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Wed, 13 Nov 2024 04:38:42 +0400
Subject: [PATCH] Accept input when clicking off the component (#11541)

Closes #11360

https://github.com/user-attachments/assets/f030ddc0-e084-43de-8ed7-fcac21a740a5
---
 .../components/ComponentBrowser.vue           | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/gui/src/project-view/components/ComponentBrowser.vue b/app/gui/src/project-view/components/ComponentBrowser.vue
index 54a627ee9d..f74ff31598 100644
--- a/app/gui/src/project-view/components/ComponentBrowser.vue
+++ b/app/gui/src/project-view/components/ComponentBrowser.vue
@@ -18,7 +18,7 @@ import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { type Typename } from '@/stores/suggestionDatabase/entry'
 import type { VisualizationDataSource } from '@/stores/visualization'
-import { cancelOnClick, isNodeOutside, targetIsOutside } from '@/util/autoBlur'
+import { isNodeOutside, targetIsOutside } from '@/util/autoBlur'
 import { tryGetIndex } from '@/util/data/array'
 import type { Opt } from '@/util/data/opt'
 import { Rect } from '@/util/data/rect'
@@ -77,17 +77,29 @@ const clickOutsideAssociatedElements = (e: PointerEvent) => {
       false
     : props.associatedElements.every((element) => targetIsOutside(e, element))
 }
-const cbOpen: Interaction = cancelOnClick(clickOutsideAssociatedElements, {
-  cancel: () => emit('canceled'),
+const cbOpen: Interaction = {
+  pointerdown: (e: PointerEvent) => {
+    if (clickOutsideAssociatedElements(e)) {
+      if (props.usage.type === 'editNode') {
+        acceptInput()
+      } else {
+        emit('canceled')
+      }
+    }
+    return false
+  },
+  cancel: () => {
+    emit('canceled')
+  },
   end: () => {
-    // In AI prompt mode likely the input is not a valid mode.
-    if (input.mode.mode !== 'aiPrompt') {
-      acceptInput()
-    } else {
+    // In AI prompt mode, the input is likely not a valid expression.
+    if (input.mode.mode === 'aiPrompt') {
       emit('canceled')
+    } else {
+      acceptInput()
     }
   },
-})
+}
 
 function scaleValues<T extends Record<any, number>>(
   values: T,