Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Anchor not trigger getCurrentAnchor when scroll #43916

Merged
merged 2 commits into from
Jul 31, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions components/anchor/Anchor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,8 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
};

const setCurrentActiveLink = useEvent((link: string) => {
// FIXME: Seems a bug since this compare is not equals
// `activeLinkRef` is parsed value which will always trigger `onChange` event.
if (activeLinkRef.current === link) {
return;
}
Expand All @@ -234,14 +236,13 @@ const AnchorContent: React.FC<InternalAnchorProps> = (props) => {
if (animating.current) {
return;
}
if (typeof getCurrentAnchor === 'function') {
return;
}

const currentActiveLink = getInternalCurrentAnchor(
links,
targetOffset !== undefined ? targetOffset : offsetTop || 0,
bounds,
);

setCurrentActiveLink(currentActiveLink);
}, [dependencyListItem, targetOffset, offsetTop]);

Expand Down
23 changes: 21 additions & 2 deletions components/anchor/__tests__/Anchor.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -560,9 +560,12 @@ describe('Anchor Render', () => {
{ legacyRoot: true },
);

expect(onChange).toHaveBeenCalledTimes(1);
fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
// Should be 2 times:
// 1. ''
// 2. hash1 (Since `getCurrentAnchor` still return same hash)
expect(onChange).toHaveBeenCalledTimes(2);
fireEvent.click(container.querySelector(`a[href="#${hash2}"]`)!);
expect(onChange).toHaveBeenCalledTimes(3);
expect(onChange).toHaveBeenLastCalledWith(`#${hash2}`);
});

Expand Down Expand Up @@ -614,6 +617,22 @@ describe('Anchor Render', () => {
fireEvent.scroll(window || document);
}).not.toThrow();
});

it('should repeat trigger when scrolling', () => {
const getCurrentAnchor = jest.fn();
render(
<Anchor
getCurrentAnchor={getCurrentAnchor}
items={[{ key: 'test', href: null as unknown as string, title: 'test' }]}
/>,
);

for (let i = 0; i < 100; i += 1) {
getCurrentAnchor.mockReset();
fireEvent.scroll(window || document);
expect(getCurrentAnchor).toHaveBeenCalled();
}
});
});

describe('horizontal anchor', () => {
Expand Down
2 changes: 1 addition & 1 deletion components/anchor/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ For displaying anchor hyperlinks on page and jumping between them.
<code src="./demo/onChange.tsx">Listening for anchor link change</code>
<code src="./demo/replace.tsx" iframe="200">Replace href in history</code>
<code src="./demo/legacy-anchor.tsx" debug>Deprecated JSX demo</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
<code src="./demo/component-token.tsx" iframe="800" debug>Component Token</code>

## API

Expand Down
2 changes: 1 addition & 1 deletion components/anchor/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ group:
<code src="./demo/onChange.tsx">监听锚点链接改变</code>
<code src="./demo/replace.tsx" iframe="200">替换历史中的 href</code>
<code src="./demo/legacy-anchor.tsx" debug>废弃的 JSX 示例</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
<code src="./demo/component-token.tsx" iframe="800" debug>组件 Token</code>

## API

Expand Down