fix: Fix RLC and select dropdown styling and functionality (no-changelog) (#6809)

* fix: fix RLC and select dropdown styling and functionality

* fix: change setTimeout to nextTick

* fix: fix resource locator padding

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;
 		}
 

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) {
+			// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-				// @ts-ignore
+			const inputRef = this.$refs.inputField as InstanceType<N8nInput> | undefined;
-				this.$refs.inputField.focus();
+			if (inputRef?.$el) {
+				if (inputRef.focusOnInput) {
+					inputRef.focusOnInput();
+				} else if (inputRef.focus) {
+					inputRef.focus();
+				}
+
 				this.isFocused = true;
 			}
 

packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue

@@ -5,8 +5,9 @@
 		:data-test-id="`resource-locator-${parameter.name}`"
 	>
 		<resource-locator-dropdown
+			ref="dropdown"
 			:modelValue="modelValue ? modelValue.value : ''"
-			:show="showResourceDropdown"
+			:show="resourceDropdownVisible"
 			:filterable="isSearchable"
 			:filterRequired="requiresSearchFilter"
 			:resources="currentQueryResults"
@@ -16,8 +17,8 @@
 			:errorView="currentQueryError"
 			:width="width"
 			:event-bus="eventBus"
+			v-on-click-outside="hideResourceDropdown"
 			@update:modelValue="onListItemSelected"
-			@hide="onDropdownHide"
 			@filter="onSearchFilter"
 			@loadMore="loadResourcesDebounced"
 		>
@@ -117,7 +118,7 @@
 												['el-input__icon']: true,
 												['el-icon-arrow-down']: true,
 												[$style.selectIcon]: true,
-												[$style.isReverse]: showResourceDropdown,
+												[$style.isReverse]: resourceDropdownVisible,
 											}"
 										/>
 									</template>
@@ -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:
+	transition: transform 0.3s;
-		transform 0.3s,
-		-webkit-transform 0.3s;
-	-webkit-transform: rotateZ(0);
 	transform: rotateZ(0);
 
 	&.isReverse {
-		-webkit-transform: rotateZ(180deg);
 		transform: rotateZ(180deg);
 	}
 }

packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue

@@ -1,13 +1,12 @@
 <template>
 	<n8n-popover
-		:teleported="false"
 		placement="bottom"
+		:teleported="false"
 		:width="width"
 		:popper-class="$style.popover"
 		:visible="show"
 		trigger="manual"
 		data-test-id="resource-locator-dropdown"
-		v-on-click-outside="onClickOutside"
 	>
 		<div :class="$style.messageContainer" v-if="errorView">
 			<slot name="error"></slot>
@@ -215,9 +214,6 @@ export default defineComponent({
 		onFilterInput(value: string) {
 			this.$emit('filter', value);
 		},
-		onClickOutside() {
-			this.$emit('hide');
-		},
 		onItemClick(selected: string) {
 			this.$emit('update:modelValue', selected);
 		},
@@ -249,16 +245,17 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		show(toShow) {
+		show(value) {
-			if (toShow) {
+			if (value) {
 				this.hoverIndex = 0;
 				this.showHoverUrl = false;
-			}
+
 				setTimeout(() => {
-				if (toShow && this.filterable && this.$refs.search) {
+					if (value && this.filterable && this.$refs.search) {
 						(this.$refs.search as HTMLElement).focus();
 					}
 				}, 0);
+			}
 		},
 		loading() {
 			setTimeout(() => this.onResultsEnd(), 0); // in case of filtering
@@ -270,7 +267,7 @@ export default defineComponent({
 <style lang="scss" module>
 :root .popover {
 	--content-height: 236px;
-	padding: 0;
+	padding: 0 !important;
 	border: var(--border-base);
 	display: flex;
 	max-height: calc(var(--content-height) + var(--spacing-xl));