- implemented hook useClickOutside

- created ref wrapperRef to handle click out side dropdown

packages/ketcher-react/src/hooks/useClickOutside.ts

@@ -0,0 +1,19 @@
+import { useEffect, RefObject } from 'react'
+
+export const useClickOutside = (
+  targetRef: RefObject<Node>,
+  callback: () => void
+): void => {
+  useEffect(() => {
+    document.addEventListener('click', onClickOutside)
+    return () => {
+      document.removeEventListener('click', onClickOutside)
+    }
+  }, [])
+
+  const onClickOutside = (e: Event) => {
+    if (!targetRef.current?.contains(e.target as Node)) {
+      callback()
+    }
+  }
+}

packages/ketcher-react/src/script/ui/views/modal/components/Text/FontControl/FontControl.tsx

@@ -14,7 +14,8 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useRef } from 'react'
+import { useClickOutside } from '../../../../../../../hooks/useClickOutside'
 
 import classes from './FontControl.module.less'
 
@@ -24,6 +25,10 @@ export const FontControl = ({ editorState, setEditorState, styles }) => {
   const defaultFontSize = '13px'
   const [isShowingFontSizeMenu, setIsShowingFontSizeMenu] = useState(false)
   const [currentFontSize, setCurrentFontSize] = useState(defaultFontSize)
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const onClickOutsideCloseDrowndown = (): void =>
+    setIsShowingFontSizeMenu(false)
+  useClickOutside(wrapperRef, onClickOutsideCloseDrowndown)
 
   const setFontSize = (e, value) => {
     e.preventDefault()
@@ -58,7 +63,7 @@ export const FontControl = ({ editorState, setEditorState, styles }) => {
   )
 
   return (
-    <div>
+    <div ref={wrapperRef}>
       <button
         className={classes.fontBtn}
         onMouseDown={(e) => {