fix(editor): Make clicking item in RLC work the first time on small screens (#12585)

Author: elsmr

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();
 	}

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>