fix(dropdowns): allow object values for NextItem selection (#817)

zendeskgarden · Jul 22, 2020 · e61d3e5 · e61d3e5
1 parent 5118756
commit e61d3e5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 10 deletions.
diff --git a/packages/dropdowns/.size-snapshot.json b/packages/dropdowns/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 82972,
-    "minified": 51254,
-    "gzipped": 11100
+    "bundled": 83051,
+    "minified": 51288,
+    "gzipped": 11114
   },
   "index.esm.js": {
-    "bundled": 80164,
-    "minified": 48558,
-    "gzipped": 10927,
+    "bundled": 80243,
+    "minified": 48592,
+    "gzipped": 10941,
     "treeshaked": {
       "rollup": {
-        "code": 37693,
+        "code": 37727,
         "import_statements": 807
       },
       "webpack": {
-        "code": 41851
+        "code": 41885
       }
     }
   }

diff --git a/packages/dropdowns/src/elements/Dropdown/Dropdown.spec.tsx b/packages/dropdowns/src/elements/Dropdown/Dropdown.spec.tsx
@@ -101,6 +101,35 @@ describe('Dropdown', () => {
       expect(onSelectSpy.mock.calls[0][0]).toBe('next-item-1');
     });
 
+    it('selects next item when provided value is an object', () => {
+      const onSelectSpy = jest.fn();
+      const { container, getByTestId } = render(
+        <Dropdown
+          onSelect={onSelectSpy}
+          downshiftProps={{ itemToString: (item: { value: string }) => (item ? item.value : '') }}
+        >
+          <Trigger>
+            <button data-test-id="trigger">Trigger</button>
+          </Trigger>
+          <Menu data-test-id="menu">
+            <Item value={{ value: 'item-1' }}>Item 1</Item>
+            <NextItem value={{ value: 'next-item-1' }}>Next Item 1</NextItem>
+            <NextItem value={{ value: 'next-item-2' }}>Next Item 2</NextItem>
+          </Menu>
+        </Dropdown>
+      );
+
+      const trigger = getByTestId('trigger');
+      const input = container.querySelector('input');
+
+      fireEvent.click(trigger);
+      fireEvent.keyDown(input!, { key: 'ArrowDown', keyCode: 40 });
+      fireEvent.keyDown(input!, { key: 'ArrowDown', keyCode: 40 });
+      fireEvent.keyDown(input!, { key: 'ArrowRight', keyCode: 39 });
+
+      expect(onSelectSpy.mock.calls[0][0]).toEqual({ value: 'next-item-1' });
+    });
+
     it('opens dropdown on SPACE key', () => {
       const onSelectSpy = jest.fn();
       const { container, getByTestId } = render(<ExampleDropdown onSelect={onSelectSpy} />);

diff --git a/packages/dropdowns/src/elements/Menu/Items/NextItem.tsx b/packages/dropdowns/src/elements/Menu/Items/NextItem.tsx
@@ -35,12 +35,15 @@ NextItemComponent.displayName = 'NextItemComponent';
  */
 export const NextItem = React.forwardRef<HTMLLIElement, Omit<IItemProps, 'component'>>(
   ({ value, disabled, ...props }, ref) => {
-    const { nextItemsHashRef } = useDropdownContext();
+    const {
+      nextItemsHashRef,
+      downshift: { itemToString }
+    } = useDropdownContext();
     const { itemIndexRef } = useMenuContext();
 
     if (!disabled) {
       // Include current index in global Dropdown context
-      (nextItemsHashRef.current as any)[value] = itemIndexRef.current;
+      (nextItemsHashRef.current as any)[itemToString(value)] = itemIndexRef.current;
     }
 
     return (