implement an operation when outside of PageHeader is clicked

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -18,7 +18,7 @@ export const PageHeader: FC = () => {
   }
 
   return (
-    <>
+    <div id="page-header">
       <PagePathHeader
         currentPagePath={currentPagePath}
         currentPage={currentPage}
@@ -29,6 +29,6 @@ export const PageHeader: FC = () => {
         currentPage={currentPage}
         editingPagePathHandler={editingPagePathHandler}
       />
-    </>
+    </div>
   );
 };

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -56,46 +56,9 @@ export const PageTitleHeader: FC<Props> = (props) => {
     pagePathRenameHandler(editingPagePath);
   };
 
-  // useEffect(() => {
-  //   const element = ref.current;
-
-  //   if (element == null) {
-  //     return;
-  //   }
-
-  //   const handleClickOutside = (e) => {
-  //     if (!element.contains(e.target)) {
-  //       pagePathRenameHandler(editingPagePath);
-  //     }
-  //   };
-
-  //   document.addEventListener('click', handleClickOutside);
-
-  //   return () => {
-  //     document.removeEventListener('click', handleClickOutside);
-  //   };
-
-  // }, []);
-
-  // const clickOutSideHandler = (e) => {
-  //   const container = document.getElementById('page-title-header');
-
-  //   if (container && !container.contains(e.target)) {
-  //     pagePathRenameHandler(editingPagePath);
-  //     console.log('click outside');
-  //   }
-  // };
-
-  // useEffect(() => {
-  //   document.addEventListener('click', clickOutSideHandler);
-
-  //   return () => {
-  //     document.removeEventListener('click', clickOutSideHandler);
-  //   };
-  // }, []);
-
   return (
     <div
+      id="page-title-header"
       className="row"
       // onBlur={onBlurHandler}
       ref={ref}

apps/app/src/components/PageHeader/TextInputForPageTitleAndPath.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import type { Dispatch, SetStateAction, FC } from 'react';
 
 import nodePath from 'path';
@@ -42,7 +42,7 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
   const { t } = useTranslation();
 
   const { isRenameInputShown, setRenameInputShown } = stateHandler;
-  const { setEditingPagePath } = editingPagePathHandler;
+  const { editingPagePath, setEditingPagePath } = editingPagePathHandler;
 
   const onRenameFinish = () => {
     setRenameInputShown(false);
@@ -68,6 +68,21 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
     setRenameInputShown(false);
   }, [currentPage.path, setEditingPagePath, setRenameInputShown]);
 
+  useEffect(() => {
+    const onClickOutsideHandler = (e) => {
+      const pageHeaderElement = document.getElementById('page-header');
+
+      if (pageHeaderElement && !pageHeaderElement.contains(e.target)) {
+        pagePathRenameHandler(editingPagePath);
+        console.log('clicked outside');
+      }
+    };
+
+    document.addEventListener('click', onClickOutsideHandler);
+
+    return () => document.removeEventListener('click', onClickOutsideHandler);
+  }, [editingPagePath, pagePathRenameHandler]);
+
   return (
     <>
       {isRenameInputShown ? (