diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index 1a8517fbbf..9c32a91677 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -25,6 +25,7 @@ const propTypes = {
   sortItems: PropTypes.func,
   viewId: PropTypes.string,
   onToggleDetail: PropTypes.func,
+  onCloseDetail: PropTypes.func,
 };
 
 class DirTool extends React.Component {
@@ -94,7 +95,7 @@ class DirTool extends React.Component {
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail, onCloseDetail } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
     const isTagView = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/');
@@ -106,6 +107,7 @@ class DirTool extends React.Component {
             viewId={viewId}
             isCustomPermission={isCustomPermission}
             onToggleDetail={onToggleDetail}
+            onCloseDetail={onCloseDetail}
           />
         </div>
       );
diff --git a/frontend/src/metadata/components/view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/index.js
index 7745e65bf9..7bfb186b5c 100644
--- a/frontend/src/metadata/components/view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/index.js
@@ -9,7 +9,7 @@ import MapViewToolBar from './map-view-toolbar';
 
 import './index.css';
 
-const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail, onCloseDetail }) => {
   const [view, setView] = useState(null);
   const [collaborators, setCollaborators] = useState([]);
 
@@ -108,6 +108,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
           onToggleDetail={onToggleDetail}
+          onCloseDetail={onCloseDetail}
         />
       )}
       {viewType === VIEW_TYPE.MAP && (
@@ -126,6 +127,7 @@ ViewToolBar.propTypes = {
   viewId: PropTypes.string,
   isCustomPermission: PropTypes.bool,
   onToggleDetail: PropTypes.func,
+  onCloseDetail: PropTypes.func,
 };
 
 export default ViewToolBar;
diff --git a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
index c917479070..2de9b4b36d 100644
--- a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
@@ -13,6 +13,7 @@ const KanbanViewToolBar = ({
   modifyFilters,
   modifySorts,
   onToggleDetail,
+  onCloseDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -25,7 +26,7 @@ const KanbanViewToolBar = ({
   }, [viewColumns]);
 
   const onToggleKanbanSetting = () => {
-    onToggleDetail();
+    onCloseDetail();
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
   };
 
@@ -89,6 +90,7 @@ KanbanViewToolBar.propTypes = {
   modifyFilters: PropTypes.func,
   modifySorts: PropTypes.func,
   onToggleDetail: PropTypes.func,
+  onCloseDetail: PropTypes.func,
 };
 
 export default KanbanViewToolBar;
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 0186953765..fb31806d54 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -2310,6 +2310,7 @@ class LibContentView extends React.Component {
                           viewId={this.state.viewId}
                           viewType={this.props.viewType}
                           onToggleDetail={this.toggleDirentDetail}
+                          onCloseDetail={this.closeDirentDetail}
                         />
                       </div>
                     }