fix(scrollspy): remove errors when element not found

Author: wuda-io

docs/js/init.js

@@ -196,8 +196,8 @@ document.addEventListener("DOMContentLoaded", function() {
   });
 
   M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {});
-  M.Dropdown.init(document.querySelector('#left'), {alignment: 'left', constrainWidth: false});
-  M.Dropdown.init(document.querySelector('#right'), {alignment: 'right', constrainWidth: false});
+  M.Dropdown.init(document.querySelector('#dropdown-demo-left'), {alignment: 'left', constrainWidth: false});
+  M.Dropdown.init(document.querySelector('#dropdown-demo-right'), {alignment: 'right', constrainWidth: false});
 
   M.Parallax.init(document.querySelectorAll('.parallax'), {});
 

docs/js/materialize.js

@@ -1,26 +1,22 @@
 <div class="container">
   <div class="row">
     <div class="col s12 m8 offset-m1 xl7 offset-xl1">
-
-      <!--        Sidenav   -->
+      <!-- Sidenav -->
       <div id="right" class="section scrollspy">
         <h3 class="header">Navbar</h3>
         <p class="caption">The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.
         </p>
         <h4>Drag Out Menu</h4>
         <p>This plugin includes several options for customizing the menu. See <a href="sidenav.html#options">Plugin Options</a> for details.</p>
         <img class="mobile-image" src="images/menu.gif">
-
       </div>
-
-    <!--        Toast   -->
-    <div id="toast-mobile" class="section scrollspy">
-      <h3 class="header">Toast</h3>
-      <h4>Swipe to Dismiss</h4>
-      <p>On all devices, you can swipe to dismiss toasts.</p>
-      <img class="mobile-image" src="images/toast.gif">
-
-    </div>
+      <!-- Toast -->
+      <div id="toast-mobile" class="section scrollspy">
+        <h3 class="header">Toast</h3>
+        <h4>Swipe to Dismiss</h4>
+        <p>On all devices, you can swipe to dismiss toasts.</p>
+        <img class="mobile-image" src="images/toast.gif">
+      </div>
   </div>
   <div class="col hide-on-small-only m3 xl3 offset-xl1">
     <div class="toc-wrapper">

pug/mobile/mobile_content.html

@@ -175,7 +175,7 @@ <h4>Examples</h4>
           <div class="row">
             <div class="col s12 m6">
               <!-- Dropdown Trigger 1 -->
-              <a id="left" class='dropdown-trigger btn' href='#' data-target='dropdown2' style='width: 100%'>Left DropDown!</a>
+              <a id="dropdown-demo-left" class='dropdown-trigger btn' href='#' data-target='dropdown2' style='width: 100%'>Left DropDown!</a>
               <!-- Dropdown Structure 1 -->
               <ul id='dropdown2' class='dropdown-content'>
                 <li><a href="#!">one</a></li>
@@ -188,7 +188,7 @@ <h4>Examples</h4>
             </div>
             <div class="col s12 m6">
               <!-- Dropdown Trigger 2 -->
-              <a id="right" class='dropdown-trigger btn' href='#' data-target='dropdown3' style='width: 100%'>Right DropDown!</a>
+              <a id="dropdown-demo-right" class='dropdown-trigger btn' href='#' data-target='dropdown3' style='width: 100%'>Right DropDown!</a>
               <!-- Dropdown Structure 2 -->
               <ul id='dropdown3' class='dropdown-content'>
                 <li><a href="#!">one</a></li>

pug/page-contents/dropdown_content.html

@@ -91,7 +91,7 @@ import anim from "animejs";
       // Trigger keydown handler
       this.el.addEventListener('keydown', this._handleTriggerKeydownBound);
       // Item click handler
-      this.dropdownEl.addEventListener('click', this._handleDropdownClickBound);
+      this.dropdownEl?.addEventListener('click', this._handleDropdownClickBound);
       // Hover event handlers
       if (this.options.hover) {
         this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
@@ -303,6 +303,7 @@ import anim from "animejs";
     }
 
     _makeDropdownFocusable() {
+      if (!this.dropdownEl) return;
       // Needed for arrow key navigation
       this.dropdownEl.tabIndex = 0;
       // Only set tabindex if it hasn't been set by user

src/dropdown.ts

@@ -178,7 +178,7 @@ let _defaults = {
 
       if (ScrollSpy._visibleElements[0]) {
         const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
-        actElem.classList.remove(this.options.activeClass);
+        actElem?.classList.remove(this.options.activeClass);
 
         if (ScrollSpy._visibleElements[0].M_ScrollSpy && this.id < ScrollSpy._visibleElements[0].M_ScrollSpy.id) {
           ScrollSpy._visibleElements.unshift(this.el);
@@ -190,23 +190,23 @@ let _defaults = {
       else {
         ScrollSpy._visibleElements.push(this.el);
       }
-      document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id))      
-      .classList.add(this.options.activeClass);
+      const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);
+      document.querySelector(selector)?.classList.add(this.options.activeClass);
     }
 
     _exit() {
       ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter(value => value.getBoundingClientRect().height !== 0);
 
       if (ScrollSpy._visibleElements[0]) {
         const actElem = document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id));
-        actElem.classList.remove(this.options.activeClass);
+        actElem?.classList.remove(this.options.activeClass);
 
         ScrollSpy._visibleElements = ScrollSpy._visibleElements.filter((x) => x.id != this.el.id);
 
         if (ScrollSpy._visibleElements[0]) {
           // Check if empty
-          document.querySelector(this.options.getActiveElement(ScrollSpy._visibleElements[0].id))
-          .classList.add(this.options.activeClass);
+          const selector = this.options.getActiveElement(ScrollSpy._visibleElements[0].id);          
+          document.querySelector(selector)?.classList.add(this.options.activeClass);
         }
       }
     }