diff --git a/packages/design-system/src/css/input.scss b/packages/design-system/src/css/input.scss index e610d5a66..cab4d87b2 100644 --- a/packages/design-system/src/css/input.scss +++ b/packages/design-system/src/css/input.scss @@ -114,6 +114,7 @@ display: inline-block; font-size: inherit; height: var.$input-height; + min-height: var.$input-height; line-height: var.$input-height; outline: none; padding: 0 0 0 var(--spacing-2xs); @@ -231,6 +232,7 @@ @include mixins.e(inner) { height: var.$input-medium-height; + min-height: var.$input-medium-height; line-height: var.$input-medium-height; } @@ -243,6 +245,7 @@ @include mixins.e(inner) { height: var.$input-small-height; + min-height: var.$input-small-height; line-height: var.$input-small-height; } @@ -255,6 +258,7 @@ @include mixins.e(inner) { height: var.$input-mini-height; + min-height: var.$input-mini-height; line-height: var.$input-mini-height; } diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue index c427d6213..1f673bbb3 100644 --- a/packages/editor-ui/src/components/ParameterInput.vue +++ b/packages/editor-ui/src/components/ParameterInput.vue @@ -394,6 +394,7 @@ import { htmlEditorEventBus } from '@/event-bus'; import type { EventBus } from 'n8n-design-system/utils'; import { createEventBus } from 'n8n-design-system/utils'; import { useI18n } from '@/composables'; +import type { N8nInput } from 'n8n-design-system'; export default defineComponent({ name: 'parameter-input', @@ -1005,10 +1006,16 @@ export default defineComponent({ } await this.$nextTick(); - // @ts-ignore - if (this.$refs.inputField?.focus && this.$refs.inputField?.$el) { - // @ts-ignore - this.$refs.inputField.focus(); + + // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents + const inputRef = this.$refs.inputField as InstanceType | undefined; + if (inputRef?.$el) { + if (inputRef.focusOnInput) { + inputRef.focusOnInput(); + } else if (inputRef.focus) { + inputRef.focus(); + } + this.isFocused = true; } diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue index 59e199a22..7102bf481 100644 --- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue +++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue @@ -5,8 +5,9 @@ :data-test-id="`resource-locator-${parameter.name}`" > @@ -117,7 +118,7 @@ ['el-input__icon']: true, ['el-icon-arrow-down']: true, [$style.selectIcon]: true, - [$style.isReverse]: showResourceDropdown, + [$style.isReverse]: resourceDropdownVisible, }" /> @@ -263,7 +264,8 @@ export default defineComponent({ }, data() { return { - showResourceDropdown: false, + resourceDropdownVisible: false, + resourceDropdownHiding: false, searchFilter: '', cachedResponses: {} as { [key: string]: IResourceLocatorQuery }, hasCompletedASearch: false, @@ -438,7 +440,7 @@ export default defineComponent({ }, watch: { currentQueryError(curr: boolean, prev: boolean) { - if (this.showResourceDropdown && curr && !prev) { + if (this.resourceDropdownVisible && curr && !prev) { const inputRef = this.$refs.input as HTMLInputElement | undefined; if (inputRef) { inputRef.focus(); @@ -517,7 +519,7 @@ export default defineComponent({ this.trackEvent('User refreshed resource locator list'); }, onKeyDown(e: MouseEvent) { - if (this.showResourceDropdown && !this.isSearchable) { + if (this.resourceDropdownVisible && !this.isSearchable) { this.eventBus.emit('keyDown', e); } }, @@ -722,12 +724,12 @@ export default defineComponent({ } }, onInputFocus(): void { - if (!this.isListMode || this.showResourceDropdown) { + if (!this.isListMode || this.resourceDropdownVisible) { return; } void this.loadInitialResources(); - this.showResourceDropdown = true; + this.showResourceDropdown(); }, switchFromListMode(): void { if (this.isListMode && this.parameter.modes && this.parameter.modes.length > 1) { @@ -748,16 +750,37 @@ export default defineComponent({ }, onDropdownHide() { if (!this.currentQueryError) { - this.showResourceDropdown = false; + this.hideResourceDropdown(); } }, + hideResourceDropdown() { + if (!this.resourceDropdownVisible) { + return; + } + + this.resourceDropdownVisible = false; + + const inputRef = this.$refs.input as HTMLInputElement | undefined; + this.resourceDropdownHiding = true; + void this.$nextTick(() => { + inputRef?.blur?.(); + this.resourceDropdownHiding = false; + }); + }, + showResourceDropdown() { + if (this.resourceDropdownVisible || this.resourceDropdownHiding) { + return; + } + + this.resourceDropdownVisible = true; + }, onListItemSelected(value: string) { this.onInputChange(value); - this.showResourceDropdown = false; + this.hideResourceDropdown(); }, onInputBlur() { if (!this.isSearchable || this.currentQueryError) { - this.showResourceDropdown = false; + this.hideResourceDropdown(); } this.$emit('blur'); }, @@ -842,14 +865,10 @@ $--mode-selector-width: 92px; .selectIcon { cursor: pointer; font-size: 14px; - transition: - transform 0.3s, - -webkit-transform 0.3s; - -webkit-transform: rotateZ(0); + transition: transform 0.3s; transform: rotateZ(0); &.isReverse { - -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } } diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue index 1dc6c7dde..97035b914 100644 --- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue +++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue @@ -1,13 +1,12 @@