Hack closing the block chooser on click outside

src/blocks/Text/TextBlockEdit.jsx

@@ -1,27 +1,30 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
+import Dropzone from 'react-dropzone';
+
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 
 import { Icon, BlockChooser, SidebarPortal } from '@plone/volto/components';
 import { useFormStateContext } from '@plone/volto/components/manage/Form/FormContext';
-import { uploadContent } from 'volto-slate/actions';
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import addSVG from '@plone/volto/icons/circle-plus.svg';
 import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers';
 import { settings } from '~/config';
 
 import { saveSlateBlockSelection } from 'volto-slate/actions';
 import { SlateEditor } from 'volto-slate/editor';
 import { serializeNodesToText } from 'volto-slate/editor/render';
+import { createImageBlock } from 'volto-slate/utils';
+import { uploadContent } from 'volto-slate/actions';
 
 import ShortcutListing from './ShortcutListing';
 import MarkdownIntroduction from './MarkdownIntroduction';
-
 import { handleKey } from './keyboard';
-import Dropzone from 'react-dropzone';
+
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import addSVG from '@plone/volto/icons/circle-plus.svg';
+
 import './css/editor.css';
-import { createImageBlock } from 'volto-slate/utils';
 
 // TODO: refactor dropzone to separate component wrapper
 
@@ -132,6 +135,14 @@ const TextBlockEdit = (props) => {
     onAddBlock,
   ]);
 
+  // const blockChooserRef = React.useRef();
+  const handleClickOutside = React.useCallback((e) => {
+    const blockChooser = document.querySelector('.blocks-chooser');
+    document.removeEventListener('mousedown', handleClickOutside, false);
+    if (doesNodeContainClick(blockChooser, e)) return;
+    setAddNewBlockOpened(false);
+  }, []);
+
   return (
     <>
       <SidebarPortal selected={selected}>
@@ -197,7 +208,10 @@ const TextBlockEdit = (props) => {
         <Button
           basic
           icon
-          onClick={() => setAddNewBlockOpened(!addNewBlockOpened)}
+          onClick={() => {
+            document.addEventListener('mousedown', handleClickOutside, false);
+            setAddNewBlockOpened(!addNewBlockOpened);
+          }}
           className="block-add-button"
         >
           <Icon name={addSVG} className="block-add-button" size="24px" />