From ece2591bf1e97a3767b341638a3a5d6a95a310c0 Mon Sep 17 00:00:00 2001
From: Wanpan <wanpan96@163.com>
Date: Thu, 8 May 2025 15:57:30 +0800
Subject: [PATCH] fix: Mask not hiding correctly (#53767)

---
 BUG_VERSIONS.json                            |  3 ++-
 components/splitter/Splitter.tsx             |  9 +++++----
 components/splitter/__tests__/index.test.tsx | 12 ++++++++++--
 components/splitter/__tests__/lazy.test.tsx  | 14 ++++++++++++--
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/BUG_VERSIONS.json b/BUG_VERSIONS.json
index 9474706610..4ef4e1c236 100644
--- a/BUG_VERSIONS.json
+++ b/BUG_VERSIONS.json
@@ -76,5 +76,6 @@
     "https://github.com/ant-design/ant-design/issues/51430"
   ],
   "5.22.6": ["https://github.com/ant-design/ant-design/issues/52124"],
-  "5.24.8": ["https://github.com/ant-design/ant-design/issues/53652"]
+  "5.24.8": ["https://github.com/ant-design/ant-design/issues/53652"],
+  "5.25.0": ["https://github.com/ant-design/ant-design/issues/53764"]
 }
diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
index aca4ddbfd3..6c7a84946d 100644
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@@ -120,11 +120,11 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
   });
 
   const onInternalResizeEnd = useEvent((lazyEnd?: boolean) => {
-    if (lazyEnd) {
-      onOffsetEnd();
-      return;
+    onOffsetEnd();
+
+    if (!lazyEnd) {
+      onResizeEnd?.(itemPxSizes);
     }
-    onResizeEnd?.(itemPxSizes);
   });
 
   const onInternalCollapse = useEvent((index: number, type: 'start' | 'end') => {
@@ -218,6 +218,7 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
             </React.Fragment>
           );
         })}
+
         {/* Fake mask for cursor */}
         {typeof movingIndex === 'number' && (
           <div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
diff --git a/components/splitter/__tests__/index.test.tsx b/components/splitter/__tests__/index.test.tsx
index e64b7d946f..9ae78e5d69 100644
--- a/components/splitter/__tests__/index.test.tsx
+++ b/components/splitter/__tests__/index.test.tsx
@@ -103,7 +103,7 @@ describe('Splitter', () => {
 
   // ============================== Resizable ==============================
   describe('drag', () => {
-    function mockDrag(draggerEle: HTMLElement, offset: number) {
+    function mockDrag(draggerEle: HTMLElement, offset: number, container?: HTMLElement) {
       // Down
       const downEvent = createEvent.mouseDown(draggerEle);
       (downEvent as any).pageX = 0;
@@ -117,6 +117,11 @@ describe('Splitter', () => {
       (moveEvent as any).pageY = offset;
       fireEvent(draggerEle, moveEvent);
 
+      // mask should exist
+      if (container) {
+        expect(container.querySelector('.ant-splitter-mask')).toBeTruthy();
+      }
+
       // Up
       fireEvent.mouseUp(draggerEle);
     }
@@ -153,7 +158,7 @@ describe('Splitter', () => {
       await resizeSplitter();
 
       // Right
-      mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40);
+      mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, 40, container);
       expect(onResize).toHaveBeenCalledWith([90, 10]);
       expect(onResizeEnd).toHaveBeenCalledTimes(1);
       expect(onResizeEnd).toHaveBeenCalledWith([90, 10]);
@@ -162,6 +167,9 @@ describe('Splitter', () => {
       mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, -200);
       expect(onResize).toHaveBeenCalledWith([0, 100]);
       expect(onResizeEnd).toHaveBeenCalledWith([0, 100]);
+
+      // mask should hide
+      expect(container.querySelector('.ant-splitter-mask')).toBeFalsy();
     });
 
     it('The touchMove should work fine', async () => {
diff --git a/components/splitter/__tests__/lazy.test.tsx b/components/splitter/__tests__/lazy.test.tsx
index 0cb0e59813..c2eb8ca5fd 100644
--- a/components/splitter/__tests__/lazy.test.tsx
+++ b/components/splitter/__tests__/lazy.test.tsx
@@ -49,7 +49,12 @@ describe('Splitter lazy', () => {
     jest.useRealTimers();
   });
 
-  const mockDrag = (draggerEle: HTMLElement, onResize: jest.Mock, offset: number) => {
+  const mockDrag = (
+    draggerEle: HTMLElement,
+    onResize: jest.Mock,
+    offset: number,
+    container?: HTMLElement,
+  ) => {
     // Down
     const downEvent = createEvent.mouseDown(draggerEle);
     (downEvent as any).pageX = 0;
@@ -63,6 +68,11 @@ describe('Splitter lazy', () => {
     (moveEvent as any).pageY = offset;
     fireEvent(window, moveEvent);
 
+    // mask should exist
+    if (container) {
+      expect(container.querySelector('.ant-splitter-mask')).toBeTruthy();
+    }
+
     expect(onResize).not.toHaveBeenCalled();
 
     // Up
@@ -115,7 +125,7 @@ describe('Splitter lazy', () => {
     await resizeSplitter();
 
     // Right
-    mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000);
+    mockDrag(container.querySelector('.ant-splitter-bar-dragger')!, onResize, 1000, container);
     expect(onResizeEnd).toHaveBeenCalledTimes(1);
     expect(onResizeEnd).toHaveBeenCalledWith([70, 30]);