Friday, 8 September 2023

How to acquire actual event triggered from downshift useSelect item change

I'm using the useSelect hook provided by downshift.

I have a situation where I'm unable to change the items passed into useSelect.

Each menuItem has a handler that expects the event as a parameter, but I don't see a way to get access to the actual event triggered by the user.

A typical menu item looks like this

menuItems: [{
  label: 'foo',
  value: 'bar',
  onClick: (event) => doTheThing(event),
}]

In previous cases I've leveraged the onSelectItemChange handler to obtain the selected item

const { getItemProps, getLabelProps, getMenuProps, getToggleButtonProps, highlightedIndex, isOpen } = useSelect({
  items: menuItems,
  onSelectedItemChange: ({ selectedItem }) => {
    // call the item's event handler
    selectedItem.onClick(<here's where I need the actual event object>);
  }
});

but the arguments passed to onSelectedItemChange do not include the actual event that triggered the selected item change.

I've searched through the downshift repo for a function that returns the event, but nothing stands out.

Perhaps there's another strategy I can use to acquire the event?



from How to acquire actual event triggered from downshift useSelect item change

No comments:

Post a Comment