scroll results into view when loaded

rewiringamerica · Oct 1, 2023 · c92d818 · c92d818
1 parent 55a965d
commit c92d818
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/state-calculator.ts b/src/state-calculator.ts
@@ -220,6 +220,17 @@ export class RewiringAmericaStateCalculator extends LitElement {
     },
   });
 
+  override updated() {
+    if (
+      this._utilitiesTask.status === TaskStatus.COMPLETE &&
+      this._task.status === TaskStatus.COMPLETE
+    ) {
+      // if the utility selector is shown, prefer to scroll there, otherwise scroll to at a glance:
+      const results = this.shadowRoot?.querySelector('#utility-selector, #at-a-glance');
+      results?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }
+
   override render() {
     // If we have incentives loaded, use coverage.state from that to determine
     // which state outline to show. Otherwise, look at the "tempState" override,

diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
@@ -334,7 +334,7 @@ const summaryBoxTemplate = (
 
 const atAGlanceTemplate = (response: APIResponse) => {
   return html`
-    <div class="grid-section">
+    <div class="grid-section" id="at-a-glance">
       <h2 class="grid-section__header">Incentives at a glance</h2>
       <div class="grid-4-2-1 grid-4-2-1--align-start">
         ${summaryBoxTemplate(

diff --git a/src/utility-selector.ts b/src/utility-selector.ts
@@ -118,7 +118,7 @@ export const utilitySelectorTemplate = (
   utilityOptions: OptionParam[],
   onChange: (utilityId: string) => void,
 ) =>
-  html` <div class="utility-selector">
+  html` <div class="utility-selector" id="utility-selector">
     <div class="utility-selector__map">
       ${stateInfo.icon()}
       <h1 class="utility-selector__title">