menu

downshift

🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components

Channels
Team
Posts
Members
Info
down-caret

Using downshift for a dropdown menu with links

Instead of always relying on JavaScript to handle item selection, has anybody figured out a way to render menu items as anchor tags that get "clicked" when they're selected? Imagine a menu with two items: • Show alert: shows some alert message when clicked/keyed …

thumbsup
0
message-simple
0

Pass a ref to the main menu list

I need to set up an scroll listener on the ul that receives the props from getMenuProps. How can I pass a ref through to this object?

thumbsup
0
message-simple
1

Question

I have currently have a custom dropdown component that only allows one item option to be selected but the requirements have changed to allow multiple selections and single selection. Is there a prop to pass Downshift to define if the custom dropdown will allow multiple…

thumbsup
0
message-simple
0

Having issues using Downshift with Emotion css-in-js library

When I add the css prop on my root Downshift div, I get the error: downshift: If you return a non-DOM element, you must use apply the getRootProps function

thumbsup
0
message-simple
1

My experience building a dropdown with Downshift :)!

https://dev.to/aromanarguello/how-to-build-an-autocomplete-dropdown-in-react-using-downshift-1c3o

thumbsup
0
message-simple
0

Downshift Hooks - first one

Hey everyone. I just released a dropdown selection hook via https://github.com/silviuavram/downshift-hooks. The library aims to have 4 dedicated hooks for all dropdown widgets: selection, search, multiple selection and multiple search. Since their design patterns vary from each…

thumbsup
0
message-simple
0

Performance Optimization

I'm trying to prevent downshift from re-rendering every row when the highlightedIndex changes – only the previously highlighted row and the newly highlighted row. To achieve this, I tried using React.memo, which takes a second argument comparator function (careful, it works the…

thumbsup
0
message-simple
0

Get event from onSelect

I need to check to see if a meta key was pressed along with enter to prevent onSelect from firing but the only args present are the item that was selected and the stateAndHelpers object. Any ideas?

thumbsup
0
message-simple
10

Pressing enter clears all instances of Downshift

I'm having the most bizarre behavior when I have two instances of downshift rendering on a page. When you select an item in one, and then move to another instance and hit enter when there's no match, it clears both components. Here's a gif of what I mean: Does anyone have any…

thumbsup
0
message-simple
1

How to clear input when clicking away? for an autocomplete select

thumbsup
0
message-simple
0