diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue index 5deffba197..6c36ad5601 100644 --- 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 index 8cab61b64a..d726461af9 100644 --- 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 });