diff --git a/packages/frontend/editor-ui/src/components/FocusPanel.vue b/packages/frontend/editor-ui/src/components/FocusPanel.vue index c2fbb53d57..b2832d8b0d 100644 --- a/packages/frontend/editor-ui/src/components/FocusPanel.vue +++ b/packages/frontend/editor-ui/src/components/FocusPanel.vue @@ -24,7 +24,6 @@ import { isResourceLocatorValue, } from 'n8n-workflow'; import { useEnvironmentsStore } from '@/stores/environments.ee.store'; -import { useDebounce } from '@/composables/useDebounce'; import { htmlEditorEventBus } from '@/event-bus'; import { hasFocusOnInput, isFocusableEl } from '@/utils/typesUtils'; import type { ResizeData, TargetNodeParameterContext } from '@/Interface'; @@ -58,7 +57,6 @@ const telemetry = useTelemetry(); const nodeSettingsParameters = useNodeSettingsParameters(); const environmentsStore = useEnvironmentsStore(); const deviceSupport = useDeviceSupport(); -const { debounce } = useDebounce(); const styles = useStyles(); const focusedNodeParameter = computed(() => focusPanelStore.focusedNodeParameters[0]); @@ -68,6 +66,8 @@ const resolvedParameter = computed(() => : undefined, ); +const inputValue = ref(''); + const focusPanelActive = computed(() => focusPanelStore.focusPanelActive); const focusPanelWidth = computed(() => focusPanelStore.focusPanelWidth); @@ -290,7 +290,10 @@ function onExecute() { ); } -const valueChangedDebounced = debounce(valueChanged, { debounceTime: 0 }); +function onInputChange(val: string) { + inputValue.value = val; + valueChanged(val); +} // Wait for editor to mount before focusing function focusWithDelay() { @@ -333,6 +336,19 @@ watch( { immediate: true }, ); +watch( + () => resolvedParameter.value, + (newValue) => { + if (newValue) { + const value = newValue.value; + if (typeof value === 'string' && value !== inputValue.value) { + inputValue.value = value; + } + } + }, + { immediate: true }, +); + function onResize(event: ResizeData) { focusPanelStore.updateWidth(event.width); } @@ -412,86 +428,86 @@ const onResizeThrottle = useThrottleFn(onResize, 10);