Adding link to sidebar results in JavaScript error #974
Description
Description
Adding a <a> link on the right nav bar causes the following error message in developer console in chrome when scrolling (does not occur when scrolling down initially)
application.ff6f93ee.js:1 Uncaught TypeError: Cannot read property 'offsetTop' of undefined
at e.t.update (application.ff6f93ee.js:1)
at update_ (application.ff6f93ee.js:1)
I am using a clone of the repo and changed main as follows, all other files remain the same:
{% extends "base.html" %}
{% block site_nav %}
{% if nav %}
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
{% include "partials/nav.html" %}
</div>
</div>
</div>
{% endif %}
{% if page.toc %}
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<ul class="document-info-card">
<li><a href="https://www.some website.com">Insert text here</a></li>
<li><a href="https://www.some other website.com">Insert more text here</a></li>
</ul>
{% include "partials/toc.html" %}
</div>
</div>
</div>
{% endif %}
{% endblock %}If <a> tags are replaced with <div onclick="location='link'"> or anything else, there is no error reported
Reported culprit in developer console is this section:
Blur: function() {
function e(e) {
this.els_ = "string" == typeof e ? document.querySelectorAll(e) : e,
this.index_ = 0,
this.offset_ = window.pageYOffset,
this.dir_ = !1,
this.anchors_ = [].reduce.call(this.els_, function(e, t) {
var n = decodeURIComponent(t.hash);
return e.concat(document.getElementById(n.substring(1)) || [])
}, [])
}
var t = e.prototype;
return t.setup = function() {
this.update()
}
,
t.update = function() {
var e = window.pageYOffset
, t = this.offset_ - e < 0;
if (this.dir_ !== t && (this.index_ = this.index_ = t ? 0 : this.els_.length - 1),
0 !== this.anchors_.length) {
if (this.offset_ <= e)
for (var n = this.index_ + 1; n < this.els_.length && this.anchors_[n].offsetTop - 80 <= e; n++)
0 < n && (this.els_[n - 1].dataset.mdState = "blur"),
this.index_ = n;
else
for (var r = this.index_; 0 <= r; r--) {
if (!(this.anchors_[r].offsetTop - 80 > e)) {
this.index_ = r;
break
}
0 < r && (this.els_[r - 1].dataset.mdState = "")
}
this.offset_ = e,
this.dir_ = t
}
}
,
t.reset = function() {
Array.prototype.forEach.call(this.els_, function(e) {
e.dataset.mdState = ""
}),
this.index_ = 0,
this.offset_ = window.pageYOffset
}
,
e
}The line if (!(this.anchors_[r].offsetTop - 80 > e))
A similar issue was reported in #230 but was closed with no resolution. In fact, testing with the solution posted there gives me the same error
Fix #972 did not work
Expected behavior
Did not observe any abnormal functionality but error message is not expected
Actual behavior
Developer console reports the following error when scrolling
application.ff6f93ee.js:1 Uncaught TypeError: Cannot read property 'offsetTop' of undefined
at e.t.update (application.ff6f93ee.js:1)
at update_ (application.ff6f93ee.js:1)
Steps to reproduce the bug
- [First step] Include a link as described above
- [Second step] Go to a page in the docs that requires scrolling
- [Third Step] Scroll down any amount (should not produce any error messages)
- [Fourth Step] Scroll up any amount (should produce error message)
- [Fifth Step] Scroll in any direction (should produce error message)
Package versions
- Python:
2.7.10 - MkDocs:
1.0.4(latest) - Material:
3.2.0(latest)
Project configuration
No change from the repoSystem information
- OS: MacOS Mojave 10.14.3 (reproducible on Ubuntu 18.04)
- Browser: Chrome