Minor dropdown fixes

src/components/shared/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
 	dropDownSpacingTheme,
@@ -16,11 +16,22 @@ export type DropDownOption<T> = {
 	order?: number
 }
 
+function MenuListRow({
+	index,
+	names,
+	style,
+}: RowComponentProps<{
+	names: string[];
+}>) {
+	const name = names[index];
+	return <div style={style}>{name}</div>;
+}
+
 /**
  * This component renders a dropdown menu using react-select
  */
 const DropDown = <T, >({
-	ref = React.createRef<SelectInstance<DropDownOption<T>, boolean, GroupBase<DropDownOption<T>>>>(),
+	ref,
 	value,
 	text,
 	options,
@@ -69,7 +80,8 @@ const DropDown = <T, >({
 }) => {
 	const { t } = useTranslation();
 
-	const selectRef = ref;
+	const internalRef = useRef<SelectInstance<DropDownOption<T>, boolean, GroupBase<DropDownOption<T>>> | null>(null);
+	const selectRef = ref ?? internalRef;
 
 	const style = dropDownStyle<T>(customCSS ?? {});
 
@@ -91,10 +103,11 @@ const DropDown = <T, >({
 		required: boolean,
 	) => {
 		// Translate
-		// Translating is expensive, skip it if it is not required
-		if (!skipTranslate) {
-			unformattedOptions = unformattedOptions.map(option => ({ ...option, label: t(option.label as ParseKeys) }));
-		}
+		// Translating is expensive, skip it if it is not required.
+		// Either way, copy the array so the input is not transmuted later.
+		unformattedOptions = skipTranslate
+			? [...unformattedOptions]
+			: unformattedOptions.map(option => ({ ...option, label: t(option.label as ParseKeys) }));
 
 		// Add "No value" option
 		if (!required) {
@@ -130,7 +143,7 @@ const DropDown = <T, >({
 	/**
 	 * Custom component for list virtualization
 	 */
-	const MenuList = (props: MenuListProps<DropDownOption<T>, false>) => {
+	const MenuList = useCallback((props: MenuListProps<DropDownOption<T>, false>) => {
 		const { children, maxHeight } = props;
 
 		return Array.isArray(children) ? (
@@ -149,18 +162,7 @@ const DropDown = <T, >({
 				/>
 			</div>
 		) : null;
-	};
-
-	function MenuListRow({
-		index,
-		names,
-		style,
-	}: RowComponentProps<{
-		names: string[];
-	}>) {
-		const name = names[index];
-		return <div style={style}>{name}</div>;
-	}
+	}, [itemHeight]);
 
 	const filterOptions = (inputValue: string) => {
 		if (options) {
@@ -171,14 +173,23 @@ const DropDown = <T, >({
 		return [];
 	};
 
+	const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+	useEffect(() => {
+		return () => clearTimeout(debounceTimeoutRef.current);
+	}, []);
+
 	const loadOptionsAsync = (inputValue: string, callback: (options: DropDownOption<T>[]) => void) => {
-		const timeout = async () => {
-			callback(formatOptions(
-				fetchOptions ? await fetchOptions(inputValue) : filterOptions(inputValue),
-				required,
-			));
-		};
-		setTimeout(() => { timeout(); }, 1000);
+		clearTimeout(debounceTimeoutRef.current);
+		debounceTimeoutRef.current = setTimeout(() => {
+			const timeout = async () => {
+				callback(formatOptions(
+					fetchOptions ? await fetchOptions(inputValue) : filterOptions(inputValue),
+					required,
+				));
+			};
+			void timeout();
+		}, 1000);
 	};
 
 	const loadOptions = (
@@ -216,7 +227,7 @@ const DropDown = <T, >({
 		onMenuClose: () => openMenu(false),
 		isDisabled: disabled,
 		openMenuOnFocus: openMenuOnFocus,
-		menuPlacement: menuPlacement ?? "auto",
+		menuPlacement: menuPlacement,
 		components: { MenuList },
 	};
 
@@ -229,7 +240,6 @@ const DropDown = <T, >({
 		<AsyncSelect
 			ref={selectRef}
 			{...commonProps}
-			openMenuOnFocus={false}
 			noOptionsMessage={() => t("SELECT_NO_MATCHING_RESULTS")}
 		/>
 	);

src/components/shared/wizard/RenderField.tsx

@@ -422,7 +422,9 @@ const EditableSingleSelectDropDown = <T, >({
 			}
 			customCSS={{ isMetadataStyle: focused ? false : true, width: "100%" }}
 			handleMenuIsOpen={(open: boolean) => setFocused(open)}
-			openMenuOnFocus
+			// Deliberately false: with the menu open, Tab breaks keyboard
+			// navigation through the metadata form fields (see f44c9b7).
+			openMenuOnFocus={false}
 			autoFocus={isFirstField}
 			skipTranslate={!metadataField.translatable}
 		/>