chore: improve keyboard navigation in tag (pill) mode

Author: r0b1n

packages/pluggableWidgets/combobox-web/CHANGELOG.md

@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - We made it possibly to clear the selection in single selection mode with Backspace key.
+- We improved keyboard navigation for multi selection with
 
 ## [2.7.0] - 2026-01-14
 

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -18,6 +18,7 @@ export function MultiSelection({
     ariaRequired,
     ...options
 }: SelectionBaseProps<MultiSelector>): ReactElement {
+    const inputRef = useRef<HTMLInputElement>(null);
     const {
         isOpen,
         getToggleButtonProps,
@@ -33,8 +34,7 @@ export function MultiSelection({
         items,
         setSelectedItems,
         toggleSelectedItem
-    } = useDownshiftMultiSelectProps(selector, options, a11yConfig.a11yStatusMessage);
-    const inputRef = useRef<HTMLInputElement>(null);
+    } = useDownshiftMultiSelectProps(selector, options, inputRef, a11yConfig.a11yStatusMessage);
     const isSelectedItemsBoxStyle = selector.selectedItemsStyle === "boxes";
     const isOptionsSelected = selector.isOptionsSelected();
     const inputLabel = getInputLabel(options.inputId);

packages/pluggableWidgets/combobox-web/src/hooks/useDownshiftMultiSelectProps.ts

@@ -8,7 +8,7 @@ import {
     useMultipleSelection,
     UseMultipleSelectionReturnValue
 } from "downshift";
-import { useCallback, useMemo } from "react";
+import { RefObject, useCallback, useMemo } from "react";
 import { A11yStatusMessage, MultiSelector } from "../helpers/types";
 
 export type UseDownshiftMultiSelectPropsReturnValue = UseMultipleSelectionReturnValue<string> &
@@ -36,6 +36,7 @@ interface Options {
 export function useDownshiftMultiSelectProps(
     selector: MultiSelector,
     options: Options,
+    inputRef: RefObject<HTMLInputElement | null>,
     a11yStatusMessage: A11yStatusMessage
 ): UseDownshiftMultiSelectPropsReturnValue {
     const {
@@ -57,14 +58,24 @@ export function useDownshiftMultiSelectProps(
             selector.setValue(selectedItems ?? []);
         },
 
-        onStateChange({ selectedItems: newSelectedItems, type }) {
+        onStateChange({ selectedItems: newSelectedItems, type, activeIndex: newActiveIndex }) {
             switch (type) {
                 case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
                 case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+                    if (newActiveIndex === -1) {
+                        inputRef.current?.focus();
+                    }
+                    setSelectedItems(newSelectedItems!);
+                    break;
                 case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
                 case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
                     setSelectedItems(newSelectedItems!);
                     break;
+                case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownNavigationNext:
+                    if (newActiveIndex === -1) {
+                        inputRef.current?.focus();
+                    }
+                    break;
                 default:
                     break;
             }