Control closing the menu if clicking outside

• downshift version: 1.31.14
• node version: 9
• npm (or yarn) version: 1.6.0

I’m looking for a way to prevent the menu from closing when clicking outside the menu.

Right now when you click outside the menu , handleToggle is always called and isOpen set to false closing the menu. I’m looking to prevent this where I want to actually keep the menu open in some cases , is there anyway to achieve this ?

handleToggle = ({ isOpen, type }) => {
    this.setState({ open: isOpen })
}

<Downshift
   defaultIsOpen={open}
   isOpen={open}
   onStateChange={this.handleToggle}

[kentcdodds]

Hi! Look at the docs for how to use the stateReducer 👌

[mnpenner]

I’m having a similar issue, but I don’t understand the solution here.

My component looks like this:

I want it so that when you click on the <input>, it won’t close, but if you click outside then it will. I’m also using a portal.

I’ve prevented the closing with a stateReducer:

function stateReducer(state: DownshiftState<Item>, changes: StateChangeOptions<Item>) {
    console.log('state:',state, 'changes:',changes);
    switch (changes.type) {
        case Downshift.stateChangeTypes.mouseUp:
            return {};
        default:
            return changes;
    }
}

But now it won’t close when I click outside either. What’s the solution?