Allow nested MenuWrappers to close on item click

webapp/src/widgets/menu/colorOption.tsx

@@ -11,7 +11,8 @@ type ColorOptionProps = MenuOptionProps & {
 }
 
 export default class ColorOption extends React.PureComponent<ColorOptionProps> {
-    private handleOnClick = (): void => {
+    private handleOnClick = (e: React.MouseEvent): void => {
+        e.target.dispatchEvent(new Event('menuItemClicked'))
         this.props.onClick(this.props.id)
     }
 

webapp/src/widgets/menu/switchOption.tsx

@@ -12,7 +12,8 @@ type SwitchOptionProps = MenuOptionProps & {
 }
 
 export default class SwitchOption extends React.PureComponent<SwitchOptionProps> {
-    private handleOnClick = (): void => {
+    private handleOnClick = (e: React.MouseEvent): void => {
+        e.target.dispatchEvent(new Event('menuItemClicked'))
         this.props.onClick(this.props.id)
     }
 

webapp/src/widgets/menu/textOption.tsx

@@ -10,7 +10,8 @@ type TextOptionProps = MenuOptionProps & {
 }
 
 export default class TextOption extends React.PureComponent<TextOptionProps> {
-    private handleOnClick = (): void => {
+    private handleOnClick = (e: React.MouseEvent): void => {
+        e.target.dispatchEvent(new Event('menuItemClicked'))
         this.props.onClick(this.props.id)
     }
 

webapp/src/widgets/menuWrapper.tsx

@@ -32,11 +32,13 @@ export default class MenuWrapper extends React.PureComponent<Props, State> {
     }
 
     public componentDidMount() {
+        document.addEventListener('menuItemClicked', this.close, true)
         document.addEventListener('click', this.closeOnBlur, true)
         document.addEventListener('keyup', this.keyboardClose, true)
     }
 
     public componentWillUnmount() {
+        document.removeEventListener('menuItemClicked', this.close, true)
         document.removeEventListener('click', this.closeOnBlur, true)
         document.removeEventListener('keyup', this.keyboardClose, true)
     }