fix: honor disabled prop in InputSearch list item

Author: wp-aberg

packages/kit/src/input-search/InputSearchListItem.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Item } from "react-stately";
 import { useOption } from "react-aria";
 import { styled, theme } from "../theme";
+import { InputSearchContext } from "./InputSearchRoot";
 
 import type { Node, ListState, ComboBoxState } from "react-stately";
 
@@ -75,6 +76,24 @@ interface ListItemProps {
 }
 
 export const ListItem = ({ item, state }: ListItemProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { children, textValue, disabled, ...itemProps } = item.props;
+
+  const { setDisabledKeys } = React.useContext(InputSearchContext);
+  React.useEffect(() => {
+    if (disabled && !state.disabledKeys.has(item.key)) {
+      setDisabledKeys((prev) => {
+        if (prev) {
+          const next = new Set(prev);
+          next.add(item.key);
+          return next;
+        } else {
+          return new Set([item.key]);
+        }
+      });
+    }
+  }, [disabled, setDisabledKeys, state.disabledKeys]);
+
   const ref = React.useRef<HTMLLIElement>(null);
   const { optionProps, isDisabled, isSelected, isFocused } = useOption(
     {
@@ -97,9 +116,6 @@ export const ListItem = ({ item, state }: ListItemProps) => {
     );
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { children, textValue, ...itemProps } = item.props;
-
   return (
     <StyledListItem
       {...itemProps}

packages/kit/src/input-search/InputSearchRoot.tsx

@@ -5,7 +5,7 @@ import { useComboBox } from "react-aria";
 import { styled, theme } from "../theme";
 
 import type * as WPDS from "../theme";
-import type { ComboBoxState } from "react-stately";
+import type { ComboBoxState, Key } from "react-stately";
 import type { AriaListBoxOptions } from "react-aria";
 import type { CollectionChildren } from "@react-types/shared";
 
@@ -20,6 +20,9 @@ type InputSearchContextProps = {
   setCollectionChildren: React.Dispatch<
     React.SetStateAction<CollectionChildren<object> | undefined>
   >;
+  setDisabledKeys: React.Dispatch<
+    React.SetStateAction<Iterable<Key> | undefined>
+  >;
   isDisabled?: boolean;
   setUsePortal: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setPortalDomNode: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
@@ -76,9 +79,11 @@ export const InputSearchRoot = ({
 }: InputSearchRootProps) => {
   const [collectionChildren, setCollectionChildren] =
     React.useState<CollectionChildren<object>>();
+  const [disabledKeys, setDisabledKeys] = React.useState<Iterable<Key>>();
 
   const state = useComboBoxState({
     children: collectionChildren,
+    disabledKeys,
     allowsCustomValue: true,
     allowsEmptyCollection: true,
     menuTrigger: openOnFocus ? "focus" : "input",
@@ -132,6 +137,7 @@ export const InputSearchRoot = ({
         inputProps,
         listBoxProps,
         setCollectionChildren,
+        setDisabledKeys,
         setUsePortal,
         setPortalDomNode,
         isDisabled: disabled,

packages/kit/src/input-search/play.stories.tsx

@@ -192,6 +192,34 @@ export const Grouping = {
   },
 };
 
+const DisabledTemplate: StoryFn<typeof InputSearch.Root> = (args) => {
+  return (
+    <Box css={{ width: "275px", height: "340px" }}>
+      <InputSearch.Root {...args} aria-label="Example-Search" openOnFocus>
+        <InputSearch.Input name="fruit" id="fruit" />
+        <InputSearch.Popover>
+          <InputSearch.List>
+            <InputSearch.ListItem value="Apple" />
+            <InputSearch.ListItem value="Banana" disabled />
+            <InputSearch.ListItem value="Orange" />
+            <InputSearch.ListItem value="Kiwi" />
+            <InputSearch.ListItem value="Pineapple" />
+          </InputSearch.List>
+        </InputSearch.Popover>
+      </InputSearch.Root>
+    </Box>
+  );
+};
+
+export const Disabled = {
+  render: DisabledTemplate,
+  args: {},
+
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 const ScrollTemplate: StoryFn<typeof InputSearch.Root> = (args) => {
   return (
     <Box css={{ width: "275px", height: "340px", marginBlockStart: "700px" }}>