New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding link to sidebar results in JavaScript error #974

Closed
MrMiaoMiao opened this Issue Jan 28, 2019 · 3 comments

Comments

Projects
None yet
2 participants
@MrMiaoMiao
Copy link

MrMiaoMiao commented Jan 28, 2019

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

  1. [First step] Include a link as described above
  2. [Second step] Go to a page in the docs that requires scrolling
  3. [Third Step] Scroll down any amount (should not produce any error messages)
  4. [Fourth Step] Scroll up any amount (should produce error message)
  5. [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 repo

System information

  • OS: MacOS Mojave 10.14.3 (reproducible on Ubuntu 18.04)
  • Browser: Chrome

@MrMiaoMiao MrMiaoMiao closed this Jan 28, 2019

@MrMiaoMiao MrMiaoMiao reopened this Jan 28, 2019

@MrMiaoMiao

This comment has been minimized.

Copy link
Author

MrMiaoMiao commented Jan 29, 2019

temporary fix: changed

if (!(this.anchors_[r].offsetTop - 80 > e)) {

to

if (this.anchors_[r] && !(this.anchors_[r].offsetTop - 80 > e)) {
@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Jan 29, 2019

Should be fixed in a182314. The selector in application.js was too unspecific catching all elements with a href attribute. This was now narrowed down to .md-nav__link.

@squidfunk

This comment has been minimized.

Copy link
Owner

squidfunk commented Jan 29, 2019

Fix released as part of 3.3.0.

@squidfunk squidfunk closed this Jan 29, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment