Downshift: Menu is not closed when TAB is pressed

[philipyoungg]

• downshift version: 1.22.1
• node version: null
• npm (or yarn) version: 5.5.1

Relevant code or config

What you did: Pressing TAB when isOpen is true

What happened: It stays open when no input present. Alternatively, It's closed when there's an input component.

Problem description: Actually, I can fix this problem by calling closeMenu on button onBlur. This is just a question though: what are the expected behavior? For me personally, it should be closed when user pressed TAB while isOpen={true}

Suggested solution: 👆if it's the exected solution

[kentcdodds]

What button are you talking about? Could you make a reproduction codesandbox? Based on this? http://kcd.im/ds-example

[MarkFalconbridge]

He may be talking about the button in this example: https://codesandbox.io/s/zx1kj58npl

I ran into the same issue when implementing a select input using downshift. I have a button and no input field because it's not something I want my users typing into. Triggering the drop down works just fine but tabbing away doesn't close the drop down.

[kentcdodds]

Oh I see. Thanks for bringing this up @philipyoungg and for clarifying @MarkFalconbridge :+1: I would be fine to merge a pull request that adds an onBlur handler to the getButtonProps here if it had a test 👌

Thanks!

[MarkFalconbridge]

You'd need to be careful just adding an onBlur. In the example https://codesandbox.io/s/zx1kj58npl, shift tabbing would certainly blur the button but you'd then have focused on the input so probably wouldn't want to close the drop down.

[kentcdodds]

That's true. Perhaps we should only blur if document.activeElement is outside this.rootEl, similar to how we handle clicking outside the component.

[MarkFalconbridge]

That would work.

[philipyoungg]

Is this solved with #314?

[kentcdodds]

Yes, I think so :+1: Thanks!