Close Options flyout when clicking an item

src/client/lazy-app/Compress/Flyout/index.tsx

@@ -18,7 +18,7 @@ type Direction = 'left' | 'right' | 'up' | 'down';
 const has = (haystack: string | string[] | undefined, needle: string) =>
   Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle;
 
-interface Props extends ComponentProps<'aside'> {
+interface Props extends Omit<ComponentProps<'aside'>, 'ref'> {
   showing?: boolean;
   direction?: Direction | Direction[];
   anchor?: Anchor;
@@ -53,16 +53,24 @@ export default class Flyout extends Component<Props, State> {
     this.setShowing(false);
   };
 
+  hide = () => {
+    this.setShowing(false);
+  };
+
+  show = () => {
+    this.setShowing(true);
+  };
+
+  toggle = () => {
+    this.setShowing(!this.state.showing);
+  };
+
   private setShowing = (showing?: boolean) => {
     this.shown = Date.now();
     if (showing) this.setState({ showing: true, hasShown: true });
     else this.setState({ showing: false });
   };
 
-  private toggle = () => {
-    this.setShowing(!this.state.showing);
-  };
-
   private reposition = () => {
     const menu = this.menu.current;
     const wrap = this.wrap.current;

src/client/lazy-app/Compress/Options/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 import * as style from './style.css';
 import 'add-css:./style.css';
@@ -65,6 +65,8 @@ export default class Options extends Component<Props, State> {
     supportedEncoderMap: undefined,
   };
 
+  menu = createRef<Flyout>();
+
   constructor() {
     super();
     supportedEncoderMapP.then((supportedEncoderMap) =>
@@ -111,10 +113,12 @@ export default class Options extends Component<Props, State> {
 
   private onCopyCliClick = () => {
     this.props.onCopyCliClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   private onCopyToOtherSideClick = () => {
     this.props.onCopyToOtherSideClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   render(
@@ -139,6 +143,7 @@ export default class Options extends Component<Props, State> {
               <h3 class={style.optionsTitle}>
                 Edit
                 <Flyout
+                  ref={this.menu}
                   class={style.menu}
                   direction={['up', 'left']}
                   anchor="right"