Uncaught DOMException: Element.querySelectorAll: '> .dropdown-submenu > a' is not a valid selector

[yuchkkicn]

Uncaught DOMException: Element.querySelectorAll: '> .dropdown-submenu > a' is not a valid selector

[squidfunk]

Oops, yes, there was another error related to the refactoring. I opened a PR which fixes the problem for the reproduction #3694, but it might still be necessary to change the slugify function to something else.

[pawamoy]

Thank you, I was able to confirm the issue. I've edited the title accordingly.

It's possibly related to the changes made in #3649. @squidfunk could you take a look?

[pawamoy]

Here's a small repro. Extract it, create a venv, install mkdocs, serve, and observe behavior by clicking on the Section 3 dropdown.

repro3691.zip

[squidfunk]

Here's what's happening: the slugify function that is used by toc.slugify seems to filter all characters out (as it only seems to keep ASCII), resulting in an "" (empty string) anchor. This leads to the following invalid selector:

<a href="#" class="dropdown-item">Section 3</a>

This selector is passed to document.querySelector which says that an empty value for an anchor is not valid. Solution: choose another slugify function. Here's what we recommend to the users of Material for MkDocs:

markdown_extensions:
  - toc:
      slugify: !!python/object/apply:pymdownx.slugs.slugify
        kwds:
          case: lower

Note that this requires to pip install pymdown-extensions. Sorry for linking to our documentation, MkDocs own documentation does not seem to have a section (yet?) on configuring slugification for non-Latin languages correctly.

[squidfunk]

@tomchristie do you have any plans when the fix will be released, e.g., as part of bugfix release like 1.6.1? The reported issue is hitting all users that use the default mkdocs theme and have at least one 3rd level section.