feat: Multiple minor changes (#769)

app/assets/javascripts/components/NotesListOptionsMenu.tsx

@@ -2,11 +2,11 @@ import { WebApplication } from '@/ui_models/application';
 import { CollectionSort, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { Menu } from './menu/Menu';
 import { MenuItem, MenuItemSeparator, MenuItemType } from './menu/MenuItem';
-import { toDirective } from './utils';
+import { toDirective, useCloseOnClickOutside } from './utils';
 
 type Props = {
   application: WebApplication;
@@ -108,8 +108,16 @@ flex flex-col py-2 bottom-0 left-2 absolute';
       application.setPreference(PrefKey.NotesHideProtected, !hideProtected);
     };
 
+    const menuRef = useRef<HTMLDivElement>(null);
+
+    useCloseOnClickOutside(menuRef as any, (open: boolean) => {
+      if (!open) {
+        setShowMenuFalse();
+      }
+    });
+
     return (
-      <div className={menuClassName}>
+      <div ref={menuRef} className={menuClassName}>
         <Menu a11yLabel="Sort by" closeMenu={setShowMenuFalse}>
           <div className="px-3 my-1 text-xs font-semibold color-text uppercase">
             Sort by