-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
report(flow): fix report anchors #13233
Conversation
@@ -79,27 +79,27 @@ export function useFlowResult(): LH.FlowResult { | |||
return flowResult; | |||
} | |||
|
|||
export function useHashParam(param: string) { | |||
const [paramValue, setParamValue] = useState(getHashParam(param)); | |||
export function useHashParams(...params: string[]) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should have been designed this way initially, so changes to multiple hash params are handled in the same render.
@@ -28,27 +28,32 @@ export function convertChildAnchors(element: HTMLElement, index: number) { | |||
|
|||
const nodeId = link.hash.substr(1); | |||
link.hash = `#index=${index}&anchor=${nodeId}`; | |||
link.onclick = e => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i would expect the new-ish report click handler to end up doing the same thing..
lighthouse/report/renderer/report-renderer.js
Lines 177 to 185 in 362f376
gaugeWrapperEl.addEventListener('click', e => { | |
if (!gaugeWrapperEl.matches('[href^="#"]')) return; | |
const selector = gaugeWrapperEl.getAttribute('href'); | |
const reportRoot = gaugeWrapperEl.closest('.lh-vars'); | |
if (!selector || !reportRoot) return; | |
const destEl = this._dom.find(selector, reportRoot); | |
e.preventDefault(); | |
destEl.scrollIntoView(); | |
}); |
but it doesnt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
With the flow report, the href
of the link is now like #index=0&anchor=seo
which isn't a selector anymore.
This would also work if we didn't convert all the link href
s
Clicking a score dial, scrolling to the top, then clicking the same score dial doesn't work in the flow report. This is because the URL hash never changes, so it doesn't trigger the flow reports anchors system. This PR uses a normal
onclick
handler for anchor links in the report.#11313