refactor: use isDisabledItem throughout ComboBox (#22009)

adamalston · web-flow · commit a4a17c46e939 · 2026-04-16T03:44:46.000Z
* refactor: use isDisabledItem throughout ComboBox

* refactor: update test variable name
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -493,6 +493,33 @@ describe('ComboBox', () => {
     expect(screen.getByTestId('selected-item').textContent).toBe('Item 0');
   });
 
+  it('should skip disabled matches when pressing Enter with a partial input value', async () => {
+    const onChange = jest.fn();
+    const items = [
+      { id: 'ibm-cloud', text: 'IBM Cloud', disabled: true },
+      { id: 'ibm-quantum', text: 'IBM Quantum' },
+      { id: 'ibm-z', text: 'IBM Z' },
+    ];
+
+    render(
+      <ComboBox
+        id="test-combobox"
+        items={items}
+        itemToString={(item) => (item ? item.text : '')}
+        onChange={onChange}
+      />
+    );
+
+    await userEvent.click(findInputNode());
+    await userEvent.type(findInputNode(), 'IBM ');
+    await userEvent.keyboard('{Enter}');
+
+    expect(findInputNode()).toHaveDisplayValue('IBM Quantum');
+    expect(onChange).toHaveBeenLastCalledWith({
+      selectedItem: items[1],
+    });
+  });
+
   it('should restore selected item label on blur when input does not match any item and a selection exists', async () => {
     render(
       <ComboBox
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -139,8 +139,7 @@ const findHighlightedIndex = <ItemType,>(
 
   for (let i = 0; i < items.length; i++) {
     const item = itemToString(items[i]).toLowerCase();
-    // TODO: Use `isDisabledItem`.
-    if (!items[i]['disabled'] && item.indexOf(searchValue) !== -1) {
+    if (!isDisabledItem(items[i]) && item.indexOf(searchValue) !== -1) {
       return i;
     }
   }
@@ -679,9 +678,7 @@ const ComboBox = forwardRef(
                 );
                 const highlightedItem = filteredList[state.highlightedIndex];
 
-                // TODO: Use `isDisabledItem`.
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-                if (highlightedItem && !(highlightedItem as any).disabled) {
+                if (highlightedItem && !isDisabledItem(highlightedItem)) {
                   return {
                     ...changes,
                     selectedItem: highlightedItem,
@@ -693,9 +690,7 @@ const ComboBox = forwardRef(
                 if (autoIndex !== -1) {
                   const matchingItem = items[autoIndex];
 
-                  // TODO: Use `isDisabledItem`.
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-                  if (matchingItem && !(matchingItem as any).disabled) {
+                  if (matchingItem && !isDisabledItem(matchingItem)) {
                     return {
                       ...changes,
                       selectedItem: matchingItem,
@@ -883,11 +878,7 @@ const ComboBox = forwardRef(
       initialSelectedItem: initialSelectedItem,
       inputId: id,
       stateReducer,
-      isItemDisabled(item) {
-        // TODO: Use `isDisabledItem`.
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-        return (item as any)?.disabled;
-      },
+      isItemDisabled: isDisabledItem,
       ...downshiftProps,
       onStateChange: ({ type, selectedItem: newSelectedItem }) => {
         downshiftProps?.onStateChange?.({
