diff --git a/packages/frontend/component/src/components/rename-modal/index.tsx b/packages/frontend/component/src/components/rename-modal/index.tsx
index acf06429a3..e1c668b18a 100644
--- a/packages/frontend/component/src/components/rename-modal/index.tsx
+++ b/packages/frontend/component/src/components/rename-modal/index.tsx
@@ -51,6 +51,7 @@ export const RenameModal = ({
sideOffset: -12,
onClick: e => e.stopPropagation(),
style: { borderRadius: 10, padding: 8 },
+ role: 'rename-modal',
}}
items={
{
- appSidebarService.setHovering(true);
- }, [appSidebarService]);
+ useEffect(() => {
+ if (sidebarState !== 'floating' || resizing) {
+ return;
+ }
+ const onMouseMove = (e: MouseEvent) => {
+ const menuElement = document.querySelector(
+ 'body > [data-radix-popper-content-wrapper] > [data-radix-menu-content]'
+ );
- const onMouseLeave = useCallback(() => {
- appSidebarService.setHovering(false);
- }, [appSidebarService]);
+ if (menuElement) {
+ return;
+ }
+
+ if (e.clientX > width + 20) {
+ appSidebarService.setHovering(false);
+ }
+ };
+ document.addEventListener('mousemove', onMouseMove);
+ return () => {
+ document.removeEventListener('mousemove', onMouseMove);
+ };
+ }, [appSidebarService, resizing, sidebarState, width]);
return (
<>
@@ -152,8 +167,6 @@ export function AppSidebar({ children }: PropsWithChildren) {
})}
resizeHandleOffset={0}
resizeHandleVerticalPadding={clientBorder ? 16 : 0}
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
data-transparent
data-open={sidebarState !== 'close'}
data-has-border={hasRightBorder}
diff --git a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx
index 8a99dcd522..685a257c1d 100644
--- a/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx
+++ b/packages/frontend/core/src/modules/app-sidebar/views/sidebar-header/sidebar-switch.tsx
@@ -26,10 +26,6 @@ export const SidebarSwitch = ({
appSidebarService.toggleSidebar();
}, [appSidebarService]);
- const handleMouseLeave = useCallback(() => {
- appSidebarService.setHovering(false);
- }, [appSidebarService]);
-
const t = useI18n();
const tooltipContent = open
? t['com.affine.sidebarSwitch.collapse']()
@@ -42,7 +38,6 @@ export const SidebarSwitch = ({
className={styles.sidebarSwitchClip}
data-testid={`app-sidebar-arrow-button-${open ? 'collapse' : 'expand'}`}
onMouseEnter={handleMouseEnter}
- onMouseLeave={handleMouseLeave}
>
{
await page
.locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
.click();
- await page.mouse.move(500, 500);
const sliderBarArea = page.getByTestId('app-sidebar');
+ await sliderBarArea.hover();
+ await page.mouse.move(600, 500);
+ await page.waitForTimeout(5000);
await expect(sliderBarArea).not.toBeInViewport();
});
@@ -101,8 +103,10 @@ test('Expand Sidebar', async ({ page }) => {
await page
.locator('[data-testid=app-sidebar-arrow-button-collapse][data-show=true]')
.click();
- await page.mouse.move(500, 500);
- const sliderBarArea = page.getByTestId('sliderBar-inner');
+ const sliderBarArea = page.getByTestId('app-sidebar');
+ await sliderBarArea.hover();
+ await page.mouse.move(600, 500);
+ await page.waitForTimeout(5000);
await expect(sliderBarArea).not.toBeInViewport();
await page