• downshift version: 6.0.6

Relevant code or config

  const {
    isOpen,
    selectedItem,
    getToggleButtonProps,
    getLabelProps,
    getMenuProps,
    highlightedIndex,
    getItemProps
  } = useSelect({ items, defaultIsOpen: true });

What you did: Set defaultIsOpen to true

What happened: Dropdownlist doesn't closed on item select (by mouse or keyboard). However I can still close it by click toggle button or click outside dropdown.

Reproduction repository:

https://codesandbox.io/s/loving-worker-sifxr?file=/src/index.js

That’s not a safe thing to do. Maybe try using the ‘disabled’ prop? And disable the items while animation. … On Fri, 31 Jul 2020 at 19:30, Andrey Luzinov ***@***.***> wrote: I cannot reproduce it on sample code and I had in real project. Issue reproduced If I move mouse while list plays close animation. Which causes mutilple assignmenst like highlightedIndex = -1 and after this on list open item not scrolled. I've found workaround to fix this issue for now by disabling item props while list closing: {...(isOpen ? getItemProps({ item, index }) : {})} — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#1130 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACWAZAF5HYW3NEIRQNHP5QLR6LWRDANCNFSM4PIXPPFQ .

This also works, thanks.

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

What: Ensure that list will scrolled to highlighted item on drop down open.

<!-- Why are these changes necessary? -->

Why: shouldScrollRef == false could prevent list from scrolling to highlighted item on list open.

<!-- How were these changes implemented? -->

How: Reset shouldScrollRef to true on list open state changes.

<!-- Have you done all of these things? -->

Checklist:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

• [ ] Documentation
• [ ] Tests
• [ ] TypeScript Types
• [ ] Flow Types
• [X] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->

<!-- feel free to add additional comments -->

I cannot reproduce it on sample code and I had in real project. Issue reproduced If I move mouse while list plays close animation. Which causes mutilple assignmenst like highlightedIndex = -1 and after this on list open item not scrolled. I've found workaround to fix this issue for now by disabling item props while list closing:

{...(isOpen ? getItemProps({ item, index }) : {})}

What issue does this solve?

I run into an issue when list doesn't scroll to highlighted item on open.

Replaced solutuion with new https://github.com/downshift-js/downshift/pull/1130

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

What: Scroll list to highlighted item regadless of list open state.

<!-- Why are these changes necessary? -->

Why: I use async list opening with @kunukn/react-collapse animation library so I need to scroll to highlighted item BEFORE list opens. I need this on list open starts.

<!-- How were these changes implemented? -->

How: I've removed isOpen check which scrolls list to highlighed item.

<!-- Have you done all of these things? -->

Checklist:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

• [ ] Documentation
• [ ] Tests
• [ ] TypeScript Types
• [ ] Flow Types
• [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->

<!-- feel free to add additional comments -->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

What: Ensure that list will scrolled to highlighted item on drop down open.

<!-- Why are these changes necessary? -->

Why: shouldScrollRef == false could prevent list from scrolling to highlighted item on list open.

<!-- How were these changes implemented? -->

How: Reset shouldScrollRef to true on list open state changes.

<!-- Have you done all of these things? -->

Checklist:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

• [ ] Documentation
• [ ] Tests
• [ ] TypeScript Types
• [ ] Flow Types
• [X] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->

<!-- feel free to add additional comments -->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

What: Scroll list to highlighted item regadless of list open state.

<!-- Why are these changes necessary? -->

Why: I use async list opening with @kunukn/react-collapse animation library so I need to scroll to highlighted item BEFORE list opens. I need this on list open starts.

<!-- How were these changes implemented? -->

How: I've removed isOpen check which scrolls list to highlighed item.

<!-- Have you done all of these things? -->

Checklist:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

• [ ] Documentation
• [ ] Tests
• [ ] TypeScript Types
• [ ] Flow Types
• [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->

<!-- feel free to add additional comments -->

I've pasted reproduction code where keyboard navigation doesn' work. https://codesandbox.io/s/useselect-usage-dy6zg?file=/index.js:219-224

Have you tried?