fix(editor): Make clicking item in RLC work the first time on small s…

…creens (#12585)
n8n-io · Jan 13, 2025 · 479933f · 479933f
1 parent 89f93fd
commit 479933f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -32,7 +32,16 @@ import type {
 	INodePropertyModeTypeOptions,
 	NodeParameterValue,
 } from 'n8n-workflow';
-import { computed, nextTick, onBeforeUnmount, onMounted, type Ref, ref, watch } from 'vue';
+import {
+	computed,
+	nextTick,
+	onBeforeUnmount,
+	onMounted,
+	type Ref,
+	ref,
+	useCssModule,
+	watch,
+} from 'vue';
 import { useRouter } from 'vue-router';
 import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
 import { useTelemetry } from '@/composables/useTelemetry';
@@ -90,6 +99,7 @@ const workflowHelpers = useWorkflowHelpers({ router });
 const { callDebounced } = useDebounce();
 const i18n = useI18n();
 const telemetry = useTelemetry();
+const $style = useCssModule();
 
 const resourceDropdownVisible = ref(false);
 const resourceDropdownHiding = ref(false);
@@ -656,7 +666,13 @@ function onListItemSelected(value: NodeParameterValue) {
 	hideResourceDropdown();
 }
 
-function onInputBlur() {
+function onInputBlur(event: FocusEvent) {
+	// Do not blur if focus is within the dropdown
+	const newTarget = event.relatedTarget;
+	if (newTarget instanceof HTMLElement && dropdownRef.value?.isWithinDropdown(newTarget)) {
+		return;
+	}
+
 	if (!isSearchable.value || currentQueryError.value) {
 		hideResourceDropdown();
 	}

diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -5,7 +5,7 @@ import { N8nLoading } from 'n8n-design-system';
 import type { EventBus } from 'n8n-design-system/utils';
 import { createEventBus } from 'n8n-design-system/utils';
 import type { NodeParameterValue } from 'n8n-workflow';
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, useCssModule, watch } from 'vue';
 
 const SEARCH_BAR_HEIGHT_PX = 40;
 const SCROLL_MARGIN_PX = 10;
@@ -50,6 +50,7 @@ const emit = defineEmits<{
 }>();
 
 const i18n = useI18n();
+const $style = useCssModule();
 
 const hoverIndex = ref(0);
 const showHoverUrl = ref(false);
@@ -198,6 +199,12 @@ function onResultsEnd() {
 		}
 	}
 }
+
+function isWithinDropdown(element: HTMLElement) {
+	return Boolean(element.closest('.' + $style.popover));
+}
+
+defineExpose({ isWithinDropdown });
 </script>
 
 <template>