manually triggering toggleMenu is not working well with toggle button blur

[Roi Giladi]

• downshift version: 8.2.2

Relevant code or config

Codesandbox

What you did:

I'm trying to build a multi select component, and I want the control's container element (selected items + toggle button, the green area in the sandbox) to be able to to open/close the menu.

What happened:

when the menu is closed, clicking on the control is indeed opening the menu. but on the next click, instead of closing - the menu is first closed due to the ToggleButtonBlur event and shortly after is opened due to the FunctionToggleMenu event

I found this example which seems to work without any issue, but i couldn't figure out how to make it work in my use case 🤷

Possible solution
I guess I could manually handle the isOpen state but I would rather avoid it if possible as everything else seems to work fine.

Thanks!

[Silviu Alexandru Avram]

Hi @roigiladi ! This is more of a design related question than a coding one.

From the code point of view, our hooks kind of need to know when they should trigger the blur event, and they will do it if the blur event happened on a target that's not inside the dropdown components (input, menu, button etc). You are clicking on that outer div, not a dropdown component (as far as the hooks know), so there's your blur.

What you can do is to turn the Pick button into a simple text, and make the green outer div the actual toggle button. In essence, that's what you want to achieve anyway, toggle the menu wherever you click inside that green area.

You will also want to stop the click propagation if you click one of the selected items, because those are the places where you don't actually want the toggle to happen.

And you can remove the toggleMenu implementation altogether. Just use the dropdownprops + buttonprops on the green div. It should work. Good luck!