fix: now handling some edge cases

Correctly handling href like `/#my-hash` Preventing crash when `navItems` doesn't get initialized correctly Closes #1
CloudPower97 · Dec 3, 2018 · 4903a8c · 4903a8c
1 parent 462c2ea
commit 4903a8c
Showing 1 changed file with 22 additions and 14 deletions.
diff --git a/src/Scrollspy.js b/src/Scrollspy.js
@@ -40,7 +40,11 @@ export default class Scrollspy extends Component {
     this.setState(
       {
         elementsToSpy: items.map(item => document.getElementById(item)),
-        navItems: items.map(item => document.querySelector(`[href="#${item}"]`)),
+        navItems: items.map(
+          item =>
+            document.querySelector(`[href="#${item}"]`) ||
+            document.querySelector(`[href="/#${item}"]`)
+        ),
       },
       () => {
         this.createIntersectionObserver()
@@ -67,18 +71,20 @@ export default class Scrollspy extends Component {
     const { elementsToSpy, navItems } = this.state
     const { options, intersectionRatio: ratio } = this.props
 
-    const observer = new IntersectionObserver(entries => {
-      entries.forEach(({ isIntersecting, intersectionRatio, target }) => {
-        if (isIntersecting && intersectionRatio > ratio) {
-          this.removeActiveClass()
-          this.addActiveClass(navItems.find(navItem => navItem.href.includes(target.id)))
-        }
+    if (navItems.every(navItem => navItem)) {
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(({ isIntersecting, intersectionRatio, target }) => {
+          if (isIntersecting && intersectionRatio > ratio) {
+            this.removeActiveClass()
+            this.addActiveClass(navItems.find(navItem => navItem.href.includes(target.id)))
+          }
+        })
+      }, options)
+
+      elementsToSpy.forEach(elem => {
+        observer.observe(elem)
       })
-    }, options)
-
-    elementsToSpy.forEach(elem => {
-      observer.observe(elem)
-    })
+    }
   }
 
   addActiveClass = el => {
@@ -91,8 +97,10 @@ export default class Scrollspy extends Component {
     const { navItems } = this.state
     const { activeClass } = this.props
 
-    const active = navItems.find(navItem => navItem.classList.contains(activeClass))
-    active && active.classList.remove(activeClass)
+    if (navItems.every(navItem => navItem)) {
+      const active = navItems.find(navItem => navItem.classList.contains(activeClass))
+      active && active.classList.remove(activeClass)
+    }
   }
 
   render() {