diff --git a/packages/html-reporter/src/chip.tsx b/packages/html-reporter/src/chip.tsx
index f6de923464..5a27faadc1 100644
--- a/packages/html-reporter/src/chip.tsx
+++ b/packages/html-reporter/src/chip.tsx
@@ -56,13 +56,8 @@ export const AutoChip: React.FC<{
anchorId?: string,
}> = ({ header, initialExpanded, noInsets, children, dataTestId, anchorId }) => {
const [expanded, setExpanded] = React.useState(initialExpanded ?? true);
- const onChangeReveal = React.useCallback((isRevealed: boolean) => {
- if (isRevealed)
- setExpanded(true);
- }, [setExpanded]);
- return
+ const onReveal = React.useCallback(() => setExpanded(true), []);
+ return
boolean) | undefined;
-export function useAnchor(id: AnchorID, onChange: (isRevealed: boolean) => void) {
+function useAnchor(id: AnchorID, onReveal: () => void) {
React.useEffect(() => {
const listener = () => {
const params = new URLSearchParams(window.location.hash.slice(1));
const anchor = params.get('anchor');
const isRevealed = typeof id === 'function' ? id(anchor) : anchor === id;
- onChange(isRevealed);
+ if (isRevealed)
+ onReveal();
};
window.addEventListener('popstate', listener);
return () => window.removeEventListener('popstate', listener);
- }, [id, onChange]);
+ }, [id, onReveal]);
}
-export function Anchor({ id, onChange, children }: React.PropsWithChildren<{ id: AnchorID, onChange?(isRevealed: boolean, ref: HTMLDivElement): void }>) {
+export function Anchor({ id, onReveal, children }: React.PropsWithChildren<{ id: AnchorID, onReveal?(): void }>) {
const ref = React.useRef(null);
- const onAnchorChange = React.useCallback((isRevealed: boolean) => {
- if (!ref.current)
- return;
-
- const preventDefault = onChange?.(isRevealed, ref.current);
- if (preventDefault)
- return;
-
- if (isRevealed)
- requestAnimationFrame(() => ref.current?.scrollIntoView({ block: 'start', inline: 'start' }));
- }, [onChange]);
- useAnchor(id, onAnchorChange);
+ const onAnchorReveal = React.useCallback(() => {
+ onReveal?.();
+ requestAnimationFrame(() => ref.current?.scrollIntoView({ block: 'start', inline: 'start' }));
+ }, [onReveal]);
+ useAnchor(id, onAnchorReveal);
return {children}
;
}