I feel like I’m going to break my brain thinking about this, so I’d be super curious to hear how others are handling their prototypes.

Our design system provides an “app launcher” component consisting of a button and a dropdown menu. The app launcher has a property “Is open” that can be either true or false. Other elements have the same type of property – on a page with several dropdowns and menus you can have dozens of components that are either open or closed.

What I do want: All the components that have an “Is open” property close on click anywhere on the screen that isn’t one of the components.

What I don’t want: All the components that have an “Is open” property open on click on any one of them.

What works is to create a Boolean for each component – “App launcher is open” (true/false), “Personal menu is open” (true/false), “Honorific selection is open” (true/false) and so on. Then I can create an on-click event for the entire page to set all these to false. However I also need to create on-clicks for every single component to set every other component’s “Is open” variable to false.

E.g. Component: App launcher

On click: “App launcher is open” == true

PLUS “Personal menu is open” == false

PLUS “Honorific selection is open” == false

…

PLUS

Screen: Customs form

On click: “App launcher is open” == false

PLUS “Personal menu is open” == false

PLUS “Honorific selection is open” == false

…

Is there any more efficient way of doing this that I’m not seeing?