mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Make clicking item in RLC work the first time on small screens (#12585)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Elias Meire 2025-01-13 19:53:55 +01:00 committed by GitHub
parent 89f93fd20a
commit 479933fbd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
View file

@ -32,7 +32,16 @@ import type {
INodePropertyModeTypeOptions, INodePropertyModeTypeOptions,
NodeParameterValue, NodeParameterValue,
} from 'n8n-workflow'; } 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 { useRouter } from 'vue-router';
import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue'; import ResourceLocatorDropdown from './ResourceLocatorDropdown.vue';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
@ -90,6 +99,7 @@ const workflowHelpers = useWorkflowHelpers({ router });
const { callDebounced } = useDebounce(); const { callDebounced } = useDebounce();
const i18n = useI18n(); const i18n = useI18n();
const telemetry = useTelemetry(); const telemetry = useTelemetry();
const $style = useCssModule();
const resourceDropdownVisible = ref(false); const resourceDropdownVisible = ref(false);
const resourceDropdownHiding = ref(false); const resourceDropdownHiding = ref(false);
@ -656,7 +666,13 @@ function onListItemSelected(value: NodeParameterValue) {
hideResourceDropdown(); 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) { if (!isSearchable.value || currentQueryError.value) {
hideResourceDropdown(); hideResourceDropdown();
} }

9
packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
View file

@ -5,7 +5,7 @@ import { N8nLoading } from 'n8n-design-system';
import type { EventBus } from 'n8n-design-system/utils'; import type { EventBus } from 'n8n-design-system/utils';
import { createEventBus } from 'n8n-design-system/utils'; import { createEventBus } from 'n8n-design-system/utils';
import type { NodeParameterValue } from 'n8n-workflow'; 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 SEARCH_BAR_HEIGHT_PX = 40;
const SCROLL_MARGIN_PX = 10; const SCROLL_MARGIN_PX = 10;
@ -50,6 +50,7 @@ const emit = defineEmits<{
}>(); }>();
const i18n = useI18n(); const i18n = useI18n();
const $style = useCssModule();
const hoverIndex = ref(0); const hoverIndex = ref(0);
const showHoverUrl = ref(false); const showHoverUrl = ref(false);
@ -198,6 +199,12 @@ function onResultsEnd() {
} }
} }
} }
function isWithinDropdown(element: HTMLElement) {
return Boolean(element.closest('.' + $style.popover));
}
defineExpose({ isWithinDropdown });
</script> </script>
<template> <template>