Fix: Use arrow keys to manipulate combobox

src/packages/admin-ui-components/src/combo-box/component.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useCombobox, useMultipleSelection } from 'downshift';
+import { useCombobox } from 'downshift';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ChevronDownIcon } from '../assets';
@@ -94,10 +94,17 @@ export const ComboBox = ({
 	// Store the selected ids in a set for easy lookup - this is our source of truth for selection
 	const selectedIds = useMemo(() => new Set(valueArray.map((item) => item.value)), [valueArray]);
 
-	const { getSelectedItemProps, removeSelectedItem } =
-      useMultipleSelection({
-		initialSelectedItems: valueArray
-	  });
+	const sortOptionsBySelectedFirst = (opt1: SelectOption, opt2: SelectOption) => {
+		return (selectedIds.has(opt2.value) ? 1 : 0) - (selectedIds.has(opt1.value) ? 1 : 0)
+	}
+
+	// Handle individual item deselection
+	const handleItemDeselect = useCallback(
+		(itemToRemove: SelectOption) => {
+			onChange(valueArray.filter((item) => item.value !== itemToRemove.value));
+		},
+		[onChange, valueArray]
+	);
 
 	const {
 		isOpen,
@@ -133,7 +140,7 @@ export const ComboBox = ({
 			if (mode === SelectMode.MULTI) {
 				if (change.selectedItem) {
 					if (selectedIds.has(change.selectedItem.value)) {
-						onChange(valueArray.filter((item) => item.value !== change.selectedItem?.value));
+						handleItemDeselect(change.selectedItem)
 					} else {
 						onChange([...valueArray, change.selectedItem]);
 					}
@@ -264,15 +271,6 @@ export const ComboBox = ({
 		if (isOpen) onOpen?.();
 	}, [isOpen]);
 
-	// Handle individual item deselection
-	const handleItemDeselect = useCallback(
-		(itemToRemove: SelectOption) => {
-			removeSelectedItem(itemToRemove)
-			onChange(valueArray.filter((item) => item.value !== itemToRemove.value));
-		},
-		[onChange, valueArray]
-	);
-
 	const handleOnPillKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLDivElement>) => {
 			if (e.key === 'Backspace' || e.key === 'Delete') {
@@ -321,7 +319,7 @@ export const ComboBox = ({
 						</div>
 					)}
 						<div className={styles.inputWrapper}>
-							{/* This input needs to render always. This lets the browser handle some default behaviour around key presses. */}
+							{/* This input needs to render always. Keyboard navigation will break without it. */}
 							<input
 								readOnly={!allowFreeTyping}
 								className={styles.selectInput}
@@ -330,7 +328,7 @@ export const ComboBox = ({
 									ref: inputRef,
 									onBlur: handleBlur,
 									onFocus: openMenu,
-									placeholder: valueArray.length === 0 ? placeholder : undefined,
+									placeholder: valueArray.length === 0 ? placeholder : undefined
 								})}
 							/>
 						</div>
@@ -362,46 +360,33 @@ export const ComboBox = ({
 						<Spinner />
 					) : (
 						<>
-							{/* Show selected items at the top */}
-							{valueArray.map((selectedItem, index) => (
-								<li
-									key={selectedItem.value}
-									className={clsx(
-										styles.option, 
-										styles.selectedOption
-									)}
-									data-testid={`selected-option-${selectedItem.label}`}
-									aria-label={`Remove ${selectedItem.label ?? 'Unknown'}`}
-									{...getSelectedItemProps({ selectedItem, index })}
-									onClick={() => handleItemDeselect(selectedItem)}
-									role='option'
-									aria-selected={true}
-								>
-									<span>{selectedItem.label ?? 'Unknown'}</span>
-									<span>
-										&times;
-									</span>
-								</li>
-							))}
-
-							{/* Show separator if there are selected items and regular options */}
-							{valueArray.length > 0 && options.length > 0 && <li className={styles.separator} />}
-
-							{/* Show non-selected options */}
-							{options.map((item, index) => {
-								// Skip selected items
-								if (selectedIds.has(item.value)) return null;
-
+							{
+								// Bump selected options to the top of the list.
+								options.sort(sortOptionsBySelectedFirst).map((item, index) => {
+								const isSelected = selectedIds.has(item.value);
+								const testId = `${isSelected ? 'selected' : 'combo'}-option-${item.label}`
 								return (
 									<li
-										className={clsx(styles.option, {
-											[styles.highlighted]: highlightedIndex === index,
-										})}
+										className={clsx(
+											styles.option,
+											{ 
+												[styles.selectedOption]: isSelected,
+												[styles.highlighted]: highlightedIndex === index,
+												[styles.selectedOptionHighlighted]: isSelected &&  highlightedIndex === index,
+											}
+										)}
 										key={String(item.value)}
+										aria-label={item.label}
 										{...getItemProps({ item, index })}
-										data-testid={`combo-option-${item.label}`}
+										data-testid={testId}
+
 									>
 										<span>{item.label}</span>
+										{isSelected && (
+											<span>
+												&times;
+											</span>
+										)}
 									</li>
 								);
 							})}

src/packages/admin-ui-components/src/combo-box/styles.module.css

@@ -253,7 +253,7 @@
 	transition: background-color 0.2s ease;
 }
 
-.selectedOption:hover {
+.selectedOptionHighlighted {
 	background-color: var(--color-red);
 }
 

src/packages/end-to-end/src/__tests__/ui/postgres/enum-editor.test.ts

@@ -35,7 +35,32 @@ test('Detail Panel - should allow deselecting of an entity in a one to many rela
 	);
 
 	await page.getByTestId('detail-panel-field-invoiceLines').click();
-	await page.getByRole('option', { name: '2' }).click();
+	await page.getByRole('option', { name: '2', exact: true }).click();
 
 	await expect(page.getByTestId('detail-panel-field-invoiceLines')).toContainText('invoiceLines1×');
 });
+
+test('Filter - should be able to interact with and select options using the keyboard', async ({
+	page,
+}) => {
+	await page.goto(config.adminUiUrl);
+	await page.getByTestId('Album-entity-link').click();
+
+	// First arrow press opens the list
+	await page.getByTestId('artist-filter-input').press('ArrowDown');
+	// Go down to the third option
+	await page.getByTestId('artist-filter-input').press('ArrowDown');
+	await page.getByTestId('artist-filter-input').press('ArrowDown');
+	await page.getByTestId('artist-filter-input').press('ArrowDown');
+	await page.getByTestId('artist-filter-input').press('Enter');
+	await expect(page.getByTestId('artist-filter-box')).toContainText('Aaron Goldberg');
+
+	// Re-open the list, and then the selected option should now be the first in the list
+	await page.getByTestId('artist-filter-input').press('ArrowDown');
+	await expect(page.getByRole('option').first()).toContainText('Aaron Goldberg');
+
+	// Deselect
+	await page.getByTestId('artist-filter-input').press('ArrowDown');
+	await page.getByTestId('artist-filter-input').press('Enter');
+	await expect(page.getByTestId('artist-filter-box')).not.toContainText('Aaron Goldberg');
+});