chore(combobox): refactor to use useCombobox (#16283)

* chore: refactor to use useCombobox * fix: test error * fix: selecting disabled items * fix: pr review fixes
carbon-design-system · May 10, 2024 · 2c63069 · 2c63069
1 parent e4922a4
commit 2c63069
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 520 deletions.
diff --git a/e2e/components/ComboBox/ComboBox-test.avt.e2e.js b/e2e/components/ComboBox/ComboBox-test.avt.e2e.js
@@ -86,7 +86,6 @@ test.describe('@avt ComboBox', () => {
     await expect(menu).toBeVisible();
     // Navigation inside the menu
     // move to first option
-    await page.keyboard.press('ArrowDown');
     await expect(optionOne).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
     );
@@ -114,5 +113,24 @@ test.describe('@avt ComboBox', () => {
     // Should select and populate combobox with current filtered item
     await page.keyboard.press('Enter');
     await expect(combobox).toHaveValue('Option 2');
+    // clear to prep for general selection
+    await page.keyboard.press('Escape');
+    await expect(clearButton).toBeHidden();
+    await expect(combobox).toHaveValue('');
+
+    // should open and select option 1
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    await expect(combobox).toHaveValue('Option 1');
+    await page.keyboard.press('Escape');
+
+    // should open and select option 2
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('ArrowDown');
+    await page.keyboard.press('Enter');
+    await expect(combobox).toHaveValue('Option 2');
+    await page.keyboard.press('Escape');
   });
 });
diff --git a/e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js b/e2e/components/FluidComboBox/FluidComboBox-test.avt.e2e.js
@@ -86,7 +86,6 @@ test.describe('@avt FluidComboBox', () => {
     await expect(menu).toBeVisible();
     // Navigation inside the menu
     // move to first option
-    await page.keyboard.press('ArrowDown');
     await expect(optionOne).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
     );

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1116,141 +1116,7 @@ Map {
         "type": "bool",
       },
       "downshiftProps": Object {
-        "args": Array [
-          Object {
-            "children": Object {
-              "type": "func",
-            },
-            "defaultHighlightedIndex": Object {
-              "type": "number",
-            },
-            "defaultIsOpen": Object {
-              "type": "bool",
-            },
-            "environment": Object {
-              "args": Array [
-                Object {
-                  "Node": Object {
-                    "isRequired": true,
-                    "type": "func",
-                  },
-                  "addEventListener": Object {
-                    "isRequired": true,
-                    "type": "func",
-                  },
-                  "document": Object {
-                    "args": Array [
-                      Object {
-                        "activeElement": Object {
-                          "isRequired": true,
-                          "type": "any",
-                        },
-                        "body": Object {
-                          "isRequired": true,
-                          "type": "any",
-                        },
-                        "createElement": Object {
-                          "isRequired": true,
-                          "type": "func",
-                        },
-                        "getElementById": Object {
-                          "isRequired": true,
-                          "type": "func",
-                        },
-                      },
-                    ],
-                    "isRequired": true,
-                    "type": "shape",
-                  },
-                  "removeEventListener": Object {
-                    "isRequired": true,
-                    "type": "func",
-                  },
-                },
-              ],
-              "type": "shape",
-            },
-            "getA11yStatusMessage": Object {
-              "type": "func",
-            },
-            "getItemId": Object {
-              "type": "func",
-            },
-            "highlightedIndex": Object {
-              "type": "number",
-            },
-            "id": Object {
-              "type": "string",
-            },
-            "initialHighlightedIndex": Object {
-              "type": "number",
-            },
-            "initialInputValue": Object {
-              "type": "string",
-            },
-            "initialIsOpen": Object {
-              "type": "bool",
-            },
-            "initialSelectedItem": Object {
-              "type": "any",
-            },
-            "inputId": Object {
-              "type": "string",
-            },
-            "inputValue": Object {
-              "type": "string",
-            },
-            "isOpen": Object {
-              "type": "bool",
-            },
-            "itemCount": Object {
-              "type": "number",
-            },
-            "itemToString": Object {
-              "type": "func",
-            },
-            "labelId": Object {
-              "type": "string",
-            },
-            "menuId": Object {
-              "type": "string",
-            },
-            "onChange": Object {
-              "type": "func",
-            },
-            "onInputValueChange": Object {
-              "type": "func",
-            },
-            "onOuterClick": Object {
-              "type": "func",
-            },
-            "onSelect": Object {
-              "type": "func",
-            },
-            "onStateChange": Object {
-              "type": "func",
-            },
-            "onUserAction": Object {
-              "type": "func",
-            },
-            "scrollIntoView": Object {
-              "type": "func",
-            },
-            "selectedItem": Object {
-              "type": "any",
-            },
-            "selectedItemChanged": Object {
-              "type": "func",
-            },
-            "stateReducer": Object {
-              "type": "func",
-            },
-            "suppressRefError": Object {
-              "type": "bool",
-            },
-          },
-        ],
-        "type": "shape",
+        "type": "object",
       },
       "helperText": Object {
         "type": "node",

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -21,7 +21,7 @@ import { Slug } from '../Slug';
 
 const findInputNode = () => screen.getByRole('combobox');
 const openMenu = async () => {
-  await userEvent.click(findInputNode());
+  await userEvent.click(screen.getByTitle('Open'));
 };
 
 const prefix = 'cds';
@@ -105,6 +105,29 @@ describe('ComboBox', () => {
     });
   });
 
+  it('should not let the user select an option by clicking on the disabled option node', async () => {
+    mockProps.items[2].disabled = true;
+
+    render(<ComboBox {...mockProps} />);
+    await openMenu();
+
+    await userEvent.click(screen.getAllByRole('option')[2]);
+
+    expect(mockProps.onChange).not.toHaveBeenCalled();
+  });
+
+  it('should not select the disabled option if user type in input and press enter', async () => {
+    mockProps.items[2].disabled = true;
+
+    render(<ComboBox {...mockProps} />);
+    await userEvent.type(findInputNode(), 'Item 2');
+    await userEvent.keyboard('[Enter]');
+
+    expect(mockProps.onChange).not.toHaveBeenCalled();
+    //it should not close the menu if matching element not found and enter is pressed.
+    expect(findListBoxNode()).toHaveClass(`${prefix}--list-box--expanded`);
+  });
+
   it('should retain value if custom value is entered and `allowCustomValue` is set', async () => {
     render(<ComboBox {...mockProps} allowCustomValue />);
 

diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js
@@ -67,11 +67,6 @@ export const Default = () => (
       onChange={() => {}}
       id="carbon-combobox"
       items={items}
-      downshiftProps={{
-        onStateChange: () => {
-          console.log('the state has changed');
-        },
-      }}
       itemToString={(item) => (item ? item.text : '')}
       titleText="ComboBox title"
       helperText="Combobox helper text"
@@ -88,16 +83,9 @@ export const AllowCustomValue = () => {
       <ComboBox
         allowCustomValue
         shouldFilterItem={filterItems}
-        onChange={(e) => {
-          console.log(e);
-        }}
+        onChange={() => {}}
         id="carbon-combobox"
         items={['Apple', 'Orange', 'Banana', 'Pineapple', 'Raspberry', 'Lime']}
-        downshiftProps={{
-          onStateChange: () => {
-            console.log('the state has changed');
-          },
-        }}
         titleText="ComboBox title"
         helperText="Combobox helper text"
       />
@@ -127,11 +115,6 @@ export const Playground = (args) => (
     <ComboBox
       id="carbon-combobox"
       items={items}
-      downshiftProps={{
-        onStateChange: () => {
-          console.log('the state has changed');
-        },
-      }}
       itemToString={(item) => (item ? item.text : '')}
       titleText="ComboBox title"
       helperText="Combobox helper text"
@@ -192,19 +175,14 @@ Playground.argTypes = {
   onChange: {
     action: 'changed',
   },
-  onClick: {
+  onToggleClick: {
     action: 'clicked',
   },
   onInputChange: {
     table: {
       disable: true,
     },
   },
-  onToggleClick: {
-    table: {
-      disable: true,
-    },
-  },
   selectedItem: {
     table: {
       disable: true,