fix(anchor): ink correct switch direction (#41317)

* fix(anchor): ink correct switch direction

* chore(anchor): fix test error

* chore(anchor): fix test error

* chore: test

* chore: test

* chore: test

* chore: update

components/anchor/Anchor.tsx

@@ -173,12 +173,15 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
       `.${prefixCls}-link-title-active`,
     );
     if (linkNode && spanLinkNode.current) {
-      if (anchorDirection !== 'horizontal') {
+      const { style: inkStyle } = spanLinkNode.current;
-        spanLinkNode.current.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2}px`;
+      inkStyle.top =
-        spanLinkNode.current.style.height = `${linkNode.clientHeight}px`;
+        anchorDirection !== 'horizontal'
-      } else {
+          ? `${linkNode.offsetTop + linkNode.clientHeight / 2}px`
-        spanLinkNode.current.style.left = `${linkNode.offsetLeft}px`;
+          : '';
-        spanLinkNode.current.style.width = `${linkNode.clientWidth}px`;
+      inkStyle.height = anchorDirection !== 'horizontal' ? `${linkNode.clientHeight}px` : '';
+      inkStyle.left = anchorDirection === 'horizontal' ? `${linkNode.offsetLeft}px` : '';
+      inkStyle.width = anchorDirection === 'horizontal' ? `${linkNode.clientWidth}px` : '';
+      if (anchorDirection === 'horizontal') {
         scrollIntoView(linkNode, {
           scrollMode: 'if-needed',
           block: 'nearest',

components/anchor/__tests__/Anchor.test.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { resetWarned } from 'rc-util/lib/warning';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
 import Anchor from '..';
-import { fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils';
+import type { AnchorDirection } from '../Anchor';
 
 const { Link } = Anchor;
 
@@ -886,5 +887,54 @@ describe('Anchor Render', () => {
         'Warning: [antd: Anchor.Link] `Anchor.Link children` is not supported when `Anchor` direction is horizontal',
       );
     });
+    it('switch direction', async () => {
+      const Foo: React.FC = () => {
+        const [direction, setDirection] = useState<AnchorDirection>('vertical');
+        const toggle = () => {
+          setDirection(direction === 'vertical' ? 'horizontal' : 'vertical');
+        };
+        return (
+          <div>
+            <button onClick={toggle} type="button">
+              toggle
+            </button>
+            <Anchor
+              direction={direction}
+              items={[
+                {
+                  title: 'part-1',
+                  href: 'part-1',
+                  key: 'part-1',
+                },
+                {
+                  title: 'part-2',
+                  href: 'part-2',
+                  key: 'part-2',
+                },
+              ]}
+            />
+          </div>
+        );
+      };
+      const wrapper = await render(<Foo />);
+      (await wrapper.findByText('part-1')).click();
+      await waitFakeTimer();
+      const ink = wrapper.container.querySelector<HTMLSpanElement>('.ant-anchor-ink')!;
+      const toggleButton = wrapper.container.querySelector('button')!;
+
+      fireEvent.click(toggleButton);
+      act(() => jest.runAllTimers());
+      expect(!!ink.style.left).toBe(true);
+      expect(!!ink.style.width).toBe(true);
+      expect(ink.style.top).toBe('');
+      expect(ink.style.height).toBe('');
+
+      fireEvent.click(toggleButton);
+      act(() => jest.runAllTimers());
+      expect(!!ink.style.top).toBe(true);
+      expect(!!ink.style.height).toBe(true);
+      expect(ink.style.left).toBe('');
+      expect(ink.style.width).toBe('');
+    });
   });
 });