diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 53e2a7da569..4773dc7bb29 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -12,6 +12,7 @@ interface TabOptions {
tooltip?: string;
align?: 'left' | 'right';
to?: RouteLocationRaw;
+ disabled?: boolean;
}
interface TabsProps {
@@ -61,7 +62,11 @@ const emit = defineEmits<{
}>();
const handleTooltipClick = (tab: Value, event: MouseEvent) => emit('tooltipClick', tab, event);
-const handleTabClick = (tab: Value) => emit('update:modelValue', tab);
+const handleTabClick = (props: TabOptions) => {
+ if (!props.disabled) {
+ emit('update:modelValue', props.value);
+ }
+};
const scroll = (left: number) => {
const container = tabs.value;
@@ -93,11 +98,11 @@ const scrollRight = () => scroll(50);
handleTabClick(option.value)"
+ @click="() => handleTabClick(option)"
>
{{ option.label }}
@@ -107,7 +112,7 @@ const scrollRight = () => scroll(50);
@@ -116,9 +121,13 @@ const scrollRight = () => scroll(50);
handleTabClick(option.value)"
+ @click="() => handleTabClick(option)"
>
{{ option.label }}
@@ -174,6 +183,15 @@ const scrollRight = () => scroll(50);
}
}
+.tabDisabled {
+ color: var(--color-background-base);
+ cursor: auto;
+
+ &:hover {
+ color: var(--color-background-base);
+ }
+}
+
.activeTab {
color: var(--color-primary);
padding-bottom: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index a2a1e8e065c..280b179230d 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1150,6 +1150,7 @@ export interface ITab {
icon?: string;
align?: 'right';
tooltip?: string;
+ disabled?: boolean;
}
export interface ITabBarItem {
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 803bc86a0e6..a47476424e4 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -398,6 +398,16 @@ const binaryData = computed(() => {
});
const inputHtml = computed(() => String(inputData.value[0]?.json?.html ?? ''));
const currentOutputIndex = computed(() => {
+ if (isPaneTypeInput.value) {
+ // In the input panel we find the matching input by value
+ for (let i = 0; i <= maxOutputIndex.value; i++) {
+ if (getRawInputData(props.runIndex, i).length) {
+ return i;
+ }
+ }
+ return 0;
+ }
+
if (props.overrideOutputs?.length && !props.overrideOutputs.includes(outputIndex.value)) {
return props.overrideOutputs[0];
}
@@ -443,6 +453,8 @@ const branches = computed(() => {
label:
(search.value && itemsCount) || totalItemsCount ? `${outputName} (${items})` : outputName,
value: i,
+ // In inputPane we have exactly one active input branch
+ disabled: isPaneTypeInput.value && currentOutputIndex.value !== i,
});
}
return result;