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.

Sign up for GitHub

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(metric-filter): handle multiple reports in the same DOM #12817

Merged
merged 7 commits into from
Aug 3, 2021
Merged

report(metric-filter): handle multiple reports in the same DOM #12817

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d06279f
report(metric-filter): handle reports in the same page
paulirish Jul 21, 2021
bdd7eaf
expand metric.acronym
paulirish Jul 23, 2021
c9706b2
unique id w/ date.now()
paulirish Jul 23, 2021
43765cb
radioset scoped
paulirish Aug 3, 2021
9c67099
comment
paulirish Aug 3, 2021
9be4c5f
Util.getUniqueSuffix()
paulirish Aug 3, 2021
f7d6915
Merge remote-tracking branch 'origin/master' into double-metric-filte…
paulirish Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions report/renderer/performance-category-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,11 +311,15 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
({acronym: 'All'}),
...filterableMetrics,
]);

// Form labels need to reference unique IDs, but multiple reports rendered in the same DOM (eg PSI)
// would mean ID conflict. To address this, we 'scope' these radio inputs with a unique suffix.
const uniqSuffix = Util.getUniqueSuffix();
for (const metric of filterChoices) {
const elemId = `metric-${metric.acronym}`;
connorjclark marked this conversation as resolved.
Show resolved Hide resolved
const elemId = `metric-${metric.acronym}-${uniqSuffix}`;
const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio');
radioEl.type = 'radio';
radioEl.name = 'metricsfilter';
radioEl.name = `metricsfilter-${uniqSuffix}`;
radioEl.id = elemId;

const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label');
Expand Down