Extra, unnecessary anchor links in ToC

Created on 3 September 2022, about 2 years ago
Updated 15 January 2023, over 1 year ago

Scenario

I have what I thought was quite a simple scenario.

  1. I have a CONTENT SECTION paragraph type
  2. I have CONTENT paragraph type
  3. I have a CONTENT paragraph (#paragraph-6591) as child of SECTION (#paragraph-6592)

Behaviour as expected

I have these all rendering nicely on the HTML page and each paragraph has only one paragraph-NNNN ID as expected.

All good so far.

Behaviour NOT as expected

The problem is the ToC view mode in action.

I can see...

  1. The 'outer' CONTENT SECTION paragraph anchor as expected...
    <a href="#paragraph-6592"></a>
  2. I can also see the 'inner' CONTENT paragraph anchor as expected too...
    <a href="#paragraph-6591"></a>

BUT, what I'm also seeing is THREE erroneous inclusions of the the OUTER anchor link again before I get that

I have labelled the erroneous as such in the code below in order to be as clear as possible.

<div class="paragraph paragraph--type--sections paragraph--view-mode--ptoc-m">
    <a href="#paragraph-6592">
        <div class="field field--name-field-section-title field--type-string field--item">
            A CONTENT SECTION
        </div>
    </a>
    <div class="field field--name-field-content field--type-entity-reference-revisions field--items">
        
        <a href="#paragraph-6592"></a>  <<< Erroneous!
        
        <div class="field--item">

            <a href="#paragraph-6592"></a> <<< Erroneous!

            <div class="paragraph paragraph--type--bitesize-snippet <strong>paragraph--view-mode--ptoc-m</strong>">
                
                <a href="#paragraph-6592"></a> <<< Erroneous!
                
                <a href="#paragraph-6591">

                    <div class="field field--name-field-bitesize-snippet-ref field--type-entity-reference field--item">
                        AN ITEM OF CONTENT
                    </div>
                </a>
            </div>
        </div>
        
        <div class="field--item">
            <div class="paragraph paragraph--type--explainer paragraph--view-mode--ptoc-m">
                <a href="#paragraph-6616">
                    <div class="field field--name-field-explainer field--type-entity-reference  field--item">
                        ANOTHER ITEM OF CONTENT
                    </div>
                </a>
            </div>
        </div>
        
    </div>
</div>

What I am sure about is that those three (empty) anchor links do not come from my own content out put - they are definitely being created by the Paragraphs ToC module.

Any ideas anyone?

I'm a bit baffled by this; I've been using this solution for well over 18 months and I've only just noticed this behaviour but then I've just decided to re-vamp the theme and noticed them - I think the extra anchor links might have been there all along but I couldn't see them!?

Nick

🐛 Bug report
Status

Fixed

Component

Code

Created by

🇬🇧United Kingdom SirClickALot Somerset

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024