fix: filterable multiselect readonly state implemented

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -258,6 +258,11 @@
    */
   placeholder?: string;
 
+  /**
+   * Whether or not the filterable multiselect is readonly
+   */
+  readOnly?: boolean;
+
   /**
    * Specify feedback (mode) of the selection.
    * `top`: selected item jumps to top
@@ -335,6 +340,7 @@
     onChange,
     onMenuChange,
     placeholder,
+    readOnly,
     titleText,
     type,
     selectionFeedback = 'top-after-reopen',
@@ -505,9 +511,11 @@
   };
 
   function handleMenuChange(forceIsOpen: boolean): void {
-    const nextIsOpen = forceIsOpen ?? !isOpen;
-    setIsOpen(nextIsOpen);
-    validateHighlightFocus();
+    if (!readOnly) {
+      const nextIsOpen = forceIsOpen ?? !isOpen;
+      setIsOpen(nextIsOpen);
+      validateHighlightFocus();
+    }
   }
 
   useEffect(() => {
@@ -689,6 +697,7 @@
       [`${prefix}--multi-select--selected`]:
         controlledSelectedItems?.length > 0,
       [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
+      [`${prefix}--multi-select--readonly`]: readOnly,
     }
   );
 
@@ -798,6 +807,28 @@
     }
   };
 
+  const mergedRef = mergeRefs(textInput, inputProps.ref);
+
+  const readOnlyEventHandlers = readOnly
+    ? {
+        onClick: (evt: React.MouseEvent<HTMLInputElement>) => {
+          // NOTE: does not prevent click
+          evt.preventDefault();
+          // focus on the element as per readonly input behavior
+          if (mergedRef.current !== undefined) {
+            mergedRef.current.focus();
+          }
+        },
+        onKeyDown: (evt: React.KeyboardEvent<HTMLInputElement>) => {
+          const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
+          // This prevents the select from opening for the above keys
+          if (selectAccessKeys.includes(evt.key)) {
+            evt.preventDefault();
+          }
+        },
+      }
+    : {};
+
   const clearSelectionContent =
     controlledSelectedItems.length > 0 ? (
       <span className={`${prefix}--visually-hidden`}>
@@ -832,7 +863,7 @@
         invalidText={invalidText}
         warn={warn}
         warnText={warnText}
-        isOpen={isOpen}
+        isOpen={!readOnly && isOpen}
         size={size}>
         <div
           className={`${prefix}--list-box__field`}
@@ -853,7 +884,9 @@
           <input
             className={inputClasses}
             {...inputProps}
-            ref={mergeRefs(textInput, inputProps.ref)}
+            ref={mergedRef}
+            {...readOnlyEventHandlers}
+            readOnly={readOnly}
           />
           {invalid && (
             <WarningFilled className={`${prefix}--list-box__invalid-icon`} />

packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { act, render, screen } from '@testing-library/react';
+import { getByText } from '@carbon/test-utils/dom';
 import userEvent from '@testing-library/user-event';
 import FilterableMultiSelect from '../FilterableMultiSelect';
 import {
@@ -63,6 +64,28 @@ describe('FilterableMultiSelect', () => {
     expect(mockProps.onMenuChange).toHaveBeenCalledWith(false);
   });
 
+  it('should not be interactive if readonly', async () => {
+    const items = generateItems(4, generateGenericItem);
+    const label = 'test-label';
+    const { container } = render(
+      <FilterableMultiSelect
+        id="test"
+        readOnly={true}
+        label={label}
+        items={items}
+      />
+    );
+    await waitForPosition();
+
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    const labelNode = getByText(container, label);
+    await userEvent.click(labelNode);
+
+    expect(
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      container.querySelector('[aria-expanded="true"][aria-haspopup="listbox"]')
+    ).toBeFalsy();
+  });
   it('should initially have the menu open when open prop is provided', async () => {
     render(<FilterableMultiSelect {...mockProps} open />);
     await waitForPosition();