bug: vf-location-nearest tab activation (#1696)

When vf-location-nearest activates a tab, browsers scroll that content into focus -- this is not desirable.

components/vf-location-nearest/CHANGELOG.md

+### 1.0.2
+
+* Remove unneeded `console.log`.
+
 ### 1.0.1
 
 * changes any `set-` style functions to cleaner version

components/vf-location-nearest/vf-location-nearest.js

@@ -51,17 +51,17 @@ function vfLocationNearestDetect(locationsList) {
  * Receive a location and process it against a user location if any.
  * @example vfLocationNearestResolve(locationsList, userLocation)
  * @param {object} [locationsList] - An object of locations
- * @param {object} [userLocation] - An obhject with .latitude and .lognitude
+ * @param {object} [userLocation] - An object with .latitude and .longitude
  */
 function vfLocationNearestResolve(locationsList, userLocation) {
   // console.log(locationsList, userLocation);
-  console.log("user at",userLocation.latitude + ", " + userLocation.longitude);
+  // console.log("user at",userLocation.latitude + ", " + userLocation.longitude);
 
-  // Determing which location is closest using circles
+  // Determine which location is closest using circles
   // https://stackoverflow.com/questions/21279559/geolocation-closest-locationlat-long-from-my-position/21297385#21297385
   function calculateNearestCity(latitude, longitude) {
 
-    // Convert Degress to Radians
+    // Convert Degrees to Radians
     function Deg2Rad(deg) {
       return deg * Math.PI / 180;
     }

components/vf-location-nearest/vf-location-nearest.njk

@@ -28,7 +28,10 @@
         <a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default</a>
       </li>
       <li class="vf-tabs__item">
-        <a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="grenoble">Grenoble</a>
+        <a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg</a>
+      </li>
+      <li class="vf-tabs__item">
+        <a class="vf-tabs__link" href="#vf-tabs__section--3" data-vf-js-location-nearest-activation-target="grenoble">Grenoble</a>
       </li>
     </ul>
   </div>
@@ -40,6 +43,11 @@
       {% endmarkdown %}
     </section>
     <section class="vf-tabs__section" id="vf-tabs__section--2">
+      {% markdown %}
+      A sample `data-vf-js-location-nearest-activation-target='heidelberg'` activation target
+      {% endmarkdown %}
+    </section>
+    <section class="vf-tabs__section" id="vf-tabs__section--3">
       {% markdown %}
       A sample `data-vf-js-location-nearest-activation-target='grenoble'` activation target
       {% endmarkdown %}
@@ -47,6 +55,33 @@
   </div>
 </div>
 
+
+  <div class="vf-tabs">
+    <ul class="vf-tabs__list" data-vf-js-tabs>
+      <li class="vf-tabs__item">
+        <a class="vf-tabs__link" href="#vf-tabs__section--1" data-vf-js-location-nearest-activation-target="default">Default tabset 2</a>
+      </li>
+      <li class="vf-tabs__item">
+        <a class="vf-tabs__link" href="#vf-tabs__section--2" data-vf-js-location-nearest-activation-target="heidelberg">Heidelberg tabset 2</a>
+      </li>
+    </ul>
+  </div>
+
+  <div class="vf-tabs-content" data-vf-js-tabs-content>
+    <section class="vf-tabs__section" id="vf-tabs__section--1">
+      {% markdown %}
+      Showing a second set of tabs
+      {% endmarkdown %}
+    </section>
+    <section class="vf-tabs__section" id="vf-tabs__section--2">
+      {% markdown %}
+      Showing a second set of tabs
+      {% endmarkdown %}
+    </section>
+  </div>
+</div>
+
+
 <script type="text/javascript">
   window.onload = function () {
     // You should do this in your central JS (scripts.js) as appropriate

components/vf-tabs/CHANGELOG.md

 ### 2.0.2
 
+* Prevent hijacking of scroll when focusing tabs.
+  * https://github.com/visual-framework/vf-core/pull/1696
 * Use new interactive colour token.
   * https://github.com/visual-framework/vf-core/issues/1688
 

components/vf-tabs/vf-tabs.js

@@ -43,7 +43,7 @@ function vfTabs(scope) {
       }
     }
 
-    newTab.focus();
+    newTab.focus({preventScroll:true});
     // Make the active tab focusable by the user (Tab key)
     newTab.removeAttribute("tabindex");
     // Set the selected state
@@ -91,7 +91,7 @@ function vfTabs(scope) {
         e.preventDefault();
         // If the down key is pressed, move focus to the open panel,
         // otherwise switch to the adjacent tab
-        dir === "down" ? panels[i].focus() : tabs[dir] ? switchTab(tabs[dir]) : void 0;
+        dir === "down" ? panels[i].focus({preventScroll:true}) : tabs[dir] ? switchTab(tabs[dir]) : void 0;
       }
     });
   });