Use bootstrap ScrollSpy with anchor using dots?

[12rambau]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Context

In the development of the pydata-sphinx-theme we use extensively twitter bootstrap to build the UI of a Sphinx generated documentation. When documenting Python API, the Autodoc plugin (that reads the Python docstring and transform it into a documentation page) creates anchors for functions that correspond to the exact path f the method: "pandas.DataFrame.from_csv". These points seems to be incompatible with the twitter bootstrap ScrollSpy tool as they are not interpreted as correct anchors.

For interested reader, see this thread for more context: https://github.com/pydata/pydata-sphinx-theme/issues/1435

reproducible example

I created this small fiddle by adapting one of bootstrap example: https://codepen.io/12rambau/pen/rNovoyw

<div id="container" class="row">
  <div id="list-example" class="list-group col-4">
    <a class="list-group-item list-group-item-action" href="#item.1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#item.2">Item2</a>
    <a class="list-group-item list-group-item-action" href="#item.3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#item.4">Item 4</a>
  </div>
  <div class=col-8>
    <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
      <h4 id="item.1">Item 1</h4>
      <p> ... </p>
      <h4 id="item.2">Item 2</h4>
      <p> ...</p>
      <h4 id="item.3">Item 3</h4>
      <p> ... </p>
      <h4 id="item.4">Item 4</h4>
      <p> ... </p>
    </div>
  </div>
</div>

As you see it's simply not working as I replaced the target names by "item.1" instead of "item 1".

Going down this issue, it seems related to how uri are parsed in bootstrap. Is there any will to support my use case ? if yes how can I help, if not do you see a workaround that would not imply using custom scrollspy ?

[julien-deramond]

Thanks for opening this issue @12rambau. I haven't checked in detail this precise use case yet but it could be linked to my comment here https://github.com/twbs/bootstrap/pull/39201#pullrequestreview-1631418743 where it seems that the specification really allows almost all characters as IDs and that maybe our selector engine is too restrictive in a way. We need to dig that :)

Note: depending on how this issue is treated, if the modification is approved, we definitely need to add this use case (and others) as unit tests.

[flack]

just wanted to add that we've stumbled across this problem, too. It basically affects all JS modules, e.g. modal, collapse, etc. As soon as the ID has anything in it that has a special meaning in a selector (e.g. ., ,, +, ~), the functionality breaks. According to HTML standards, the only character that's not allowed in an ID is a whitespace, so it would be great if bootstrap could support that