fix(Picker): fixing keyboard handling when search is disabled

packages/react-components/src/components/AutoComplete/AutoComplete.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { FloatingNode, FloatingPortal } from '@floating-ui/react';
 
+import noop from '../../utils/noop';
 import { Input } from '../Input';
 import { IPickerListItem, PickerList } from '../Picker';
 import { DEFAULT_LIST_HEIGHT, MIN_LIST_HEIGHT } from '../Picker/constants';
@@ -139,6 +140,7 @@ export const AutoComplete = React.forwardRef<
       virtualItemRef,
       listElementsRef,
       activeIndex,
+      isPositioned,
     } = useFloatingPicker({
       openedOnInit: autocompleteOpenOnInit,
       disabled: disabled || readOnly,
@@ -182,6 +184,9 @@ export const AutoComplete = React.forwardRef<
                 hideWhenEmpty
                 getItemProps={getItemProps}
                 onSelect={handleSelect}
+                isPositioned={isPositioned}
+                searchDisabled={false}
+                onItemRemove={noop}
               />
             </FloatingPortal>
           )}

packages/react-components/src/components/Picker/Picker.stories.tsx

@@ -39,6 +39,8 @@ const PickerComponent = (args: IPickerProps) => {
   return (
     <Picker
       {...args}
+      openedOnInit={false}
+      searchDisabled={true}
       selected={selectedItems}
       onSelect={(items) => setSelectedItems(items)}
     />

packages/react-components/src/components/Picker/Picker.tsx

@@ -93,6 +93,7 @@ export const Picker: React.FC<IPickerProps> = ({
     activeIndex,
     maxHeight,
     setPointer,
+    isPositioned,
   } = useFloatingPicker({
     openedOnInit,
     disabled,
@@ -158,6 +159,9 @@ export const Picker: React.FC<IPickerProps> = ({
               activeIndex={activeIndex}
               selectedKeys={selectedKeys}
               listElementsRef={listElementsRef}
+              searchDisabled={searchDisabled}
+              isPositioned={isPositioned}
+              onItemRemove={handleItemRemove}
               setPointer={setPointer}
               onSelect={handleSelect}
               getFloatingProps={getFloatingProps}

packages/react-components/src/components/Picker/components/PickerList.spec.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 
 import { VirtuosoProps } from 'react-virtuoso';
-import { vitest } from 'vitest';
 
-import { render, vi } from 'test-utils';
+import { render, vi, vitest } from 'test-utils';
 
 import noop from '../../../utils/noop';
 import { DEFAULT_PICKER_OPTIONS } from '../constants';
@@ -28,6 +27,9 @@ vitest.mock('react-virtuoso', () => {
 window.HTMLElement.prototype.scrollIntoView = () => {};
 
 const defaultProps: IPickerListProps = {
+  isPositioned: false,
+  onItemRemove: noop,
+  searchDisabled: false,
   activeIndex: null,
   context: {
     x: 0,

packages/react-components/src/components/Picker/components/PickerList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { FloatingContext, FloatingFocusManager } from '@floating-ui/react';
 import cx from 'clsx';
@@ -23,6 +23,9 @@ export interface IPickerListProps {
   listElementsRef: React.MutableRefObject<(HTMLElement | null)[]>;
   activeIndex: number | null;
   selectedKeys: string[];
+  isPositioned: boolean;
+  searchDisabled: boolean;
+  onItemRemove: (key: string) => void;
   setPointer: (pointer: boolean) => void;
   onSelect: (key: string) => void;
   getFloatingProps: (
@@ -46,6 +49,9 @@ export const PickerList: React.FC<IPickerListProps> = ({
   activeIndex,
   selectedKeys,
   listElementsRef,
+  isPositioned,
+  searchDisabled,
+  onItemRemove,
   setPointer,
   onSelect,
   getFloatingProps,
@@ -57,6 +63,7 @@ export const PickerList: React.FC<IPickerListProps> = ({
   virtuosoProps,
 }) => {
   const [listHeight, setListHeight] = React.useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
   const numberOfItems = options.length;
 
   const handleListHeightChange = React.useCallback(
@@ -73,6 +80,13 @@ export const PickerList: React.FC<IPickerListProps> = ({
     [numberOfItems]
   );
 
+  useEffect(() => {
+    // focusing the list to enable keyboard handlers for items selection when the search is disabled
+    if (searchDisabled && isPositioned && activeIndex !== null) {
+      wrapperRef.current?.focus();
+    }
+  }, [searchDisabled, isPositioned, activeIndex]);
+
   useEffect(() => {
     listElementsRef.current = new Array(options.length);
   }, [options.length]);
@@ -101,6 +115,12 @@ export const PickerList: React.FC<IPickerListProps> = ({
     (key === SELECT_ALL_OPTION_KEY &&
       selectedKeys.length === getNormalizedItems(options).length);
 
+  const handleItemRemove = () => {
+    if (pickerType === 'multi') {
+      onItemRemove(selectedKeys[selectedKeys.length - 1]);
+    }
+  };
+
   return (
     <FloatingFocusManager context={context} modal={false} initialFocus={-1}>
       <div
@@ -114,12 +134,11 @@ export const PickerList: React.FC<IPickerListProps> = ({
         }}
       >
         <div
+          ref={wrapperRef}
           tabIndex={0}
           aria-multiselectable={pickerType === 'multi'}
           className={styles['listbox-wrapper']}
-          // Some screen readers do not like any wrapper tags inside
-          // the element with the role, so we spread it onto the
-          // virtualizer wrapper.
+          // Those handlers are run only when the search is disabled (only then the list is focused) in other cases this is handled by the search input
           {...getFloatingProps({
             onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
               setPointer(false);
@@ -128,6 +147,10 @@ export const PickerList: React.FC<IPickerListProps> = ({
                 onSelect(options[activeIndex].key);
               }
 
+              if (e.key === 'Backspace' || e.key === 'Delete') {
+                handleItemRemove();
+              }
+
               if (e.key === ' ') {
                 e.preventDefault();
               }