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?
