From 7311b36e6caf0900a487b7d31c93e2f803564393 Mon Sep 17 00:00:00 2001
From: gggpound <gpoundLiu@gmail.com>
Date: Wed, 6 Nov 2024 10:39:02 +0800
Subject: [PATCH] fix(range-selector): range-selector can not blur

---
 .../src/views/permission/panel-detail/index.tsx          | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/sheets-ui/src/views/permission/panel-detail/index.tsx b/packages/sheets-ui/src/views/permission/panel-detail/index.tsx
index 42b1fee57dd..7e9f9d43910 100644
--- a/packages/sheets-ui/src/views/permission/panel-detail/index.tsx
+++ b/packages/sheets-ui/src/views/permission/panel-detail/index.tsx
@@ -22,7 +22,7 @@ import { deserializeRangeWithSheet, serializeRange } from '@univerjs/engine-form
 
 import { ObjectScope, UnitAction, UnitObject, UnitRole } from '@univerjs/protocol';
 import { RangeProtectionRuleModel, setEndForRange, SheetsSelectionsService, WorksheetProtectionRuleModel } from '@univerjs/sheets';
-import { ComponentManager, IDialogService, ISidebarService, useObservable } from '@univerjs/ui';
+import { ComponentManager, IDialogService, ISidebarService, useObservable, useSidebarClick } from '@univerjs/ui';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { RANGE_SELECTOR_COMPONENT_KEY } from '../../../common/keys';
 import { UNIVER_SHEET_PERMISSION_USER_DIALOG, UNIVER_SHEET_PERMISSION_USER_DIALOG_ID } from '../../../consts/permission';
@@ -329,15 +329,16 @@ export const SheetPermissionPanelDetail = ({ fromSheetBar }: { fromSheetBar: boo
         sheetPermissionPanelModel.setRule(rule);
     };
 
-    const handlePanelClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    const handlePanelClick = (e: MouseEvent) => {
         const handleOutClick = rangeSelectorActionsRef.current?.handleOutClick;
-        handleOutClick && handleOutClick(e, isFocusRangeSelectorSet);
+        handleOutClick && handleOutClick(e, () => isFocusRangeSelectorSet(false));
     };
 
+    useSidebarClick(handlePanelClick);
     const rangeStr = activeRule?.ranges?.map((i) => serializeRange(i)).join(',');
 
     return (
-        <div className={styles.permissionPanelDetailWrapper} onClick={handlePanelClick}>
+        <div className={styles.permissionPanelDetailWrapper}>
             {/* <FormLayout className={styles.sheetPermissionPanelTitle} label={localeService.t('permission.panel.name')}>
                 <Input
                     value={activeRule?.name ?? ''}