Dropdown NextItem Components Do Not Work Properly When Passed Object Values

[louisscruz]

Expectations

All NextItem components that are passed objects as values should be selectable.

Reality

Only the final NextItem component works with arrow keys when the value is a passed object.

In debugging why this behavior was happening for Zendesk Support, this caught my eye:

The line of code is here:

react-components/packages/dropdowns/src/elements/Menu/Items/NextItem.tsx

Line 43 in 4ebc83f

(nextItemsHashRef.current as any)[value] = itemIndexRef.current;

The key in the object should be run through the passed itemToString downshift prop, if passed.

Steps to Reproduce

1. Have a menu with several "NextItem" components in it where each value is an object of some kind.
2. Try to use the right arrow key to move into anything but the last NextItem – this does not work
3. Try to use the right arrow key to move into the last NextItem – this does work

In this sandbox, open the menu and notice the difference in behavior when hitting the right arrow key for the first item and the last:

https://codesandbox.io/s/serene-gould-tg21y

Fine Print

• Component: dropdowns
• Version: tested on latest v7 + latest v8
• Browsers: all

[louisscruz]

Thanks @Austin94 ! Latest version confirmed to fix this!