Duplicate data attributes for nested sprig() calls in template breaking requests, after 1.7.0 to 1.10.2 update

[bliswebagency]

Describe the bug

After updating to latest version of sprig from 1.7.0 to 1.10.2, elements which are marked for processing by sprig now have duplicate data-hx-* attributes causing requests to fail. This happens if the element is inside a sprig template which is called by sprig() from another sprig template.

To reproduce

Steps to reproduce the behaviour:

1. Create sprig1.twig with: {{ sprig('sprig2.twig') }}
2. Create sprig2.twig with: {{ sprig('elements.twig') }}
3. Create elements.twig with: <button sprig s-method="post" s-action="/test">Sprig test</button>
4. View source and multiple data-hx-* attributes are shown and the expected button functionality fails

Expected behaviour

No duplicate attributes and functioning button

Source

sprig1.twig:
<h1>This is a top level sprig template</h1>
{{ sprig('test/sprig2') }}

sprig2.twig:
<h2>This is a second level sprig template</h2>
{{ sprig('test/buttons') }}

buttons.twig:
<p>These are buttons which have duplicate attributes. View source.</p>
<button sprig s-method="post" s-action="/tests">Sprig test button</button>

Versions

• Plugin version: 1.10.2
• Craft version: 3.7.17.1

[bencroker]

Thanks for reporting, this was being caused by double encoded values. Fixed in putyourlightson/craft-sprig-core@d348e41 and released in version 1.10.3.

[bliswebagency]

Thank you, we have just updated to the 1.10.3 version and the buttons are functioning again

[bossanova808]

Ben just a quick report as it's Friday arvo here and I'm just about to head home for the weekend - but I've just had to revert back to 1.9.3 (and core 1.0.3 too...took me a moment to work that out!) - as I am seeing funky behaviour with nested components - even with version 1.10.3.

I am seeing page reloads (i.e. sprig/htmx not attaching to a button) on previously working things. Pretty sure something is still not quite right here!

(& Apologies for the utterly woeful bug report, will dig in next week).

[bossanova808]

Hopefully this is enough to give you a clue, I have to run now...

Parent component:

                <div class="sale-section sale-notes-section">
                    <header>
                        <h3>Internal Notes</h3>
                        <span>(Use format: <strong><code>dd/mm - notes text...</code></strong>)</span>
                    </header>
                    {{ sprig('bridge/_sprig_components/sales-notes', {
                        orderReference: sale['reference'],
                        saleNotes: sale['InternalNotes'],
                        tag: sale['DearSaleID']
                    }) }}
                </div>

Sub component:

    <div class="sales-notes-wrapper">
        <input type="hidden" name="orderReference" value="{{ orderReference }}">
        <div class="grow-wrap">
            <textarea class="resize-textarea" name="newNotes" id="sale-notes-{{ tag }}" onInput="this.parentNode.dataset.replicatedValue = this.value">{{ updatedInternalNotes ?? saleNotes }}</textarea>
        </div>
        <button
                class="btn visually-hidden sale-notes-updated-button"
                id ="button-save-updated-notes-{{ tag }}"
                sprig
                s-method="post"
                s-action="/dear/dear/update-sale-order-notes"
                s-indicator="#indicator-updated-notes-{{ tag }}"
                s-replace="#sale-notes-{{ tag }}"
        >
            Save Updated Notes
            <img id="indicator-updated-notes-{{ tag }}" class="progress-indicator htmx-indicator" alt="" src="{{ craft.app.assetManager.publishedUrl('@modules/bridge/assets/icons/puff.svg', true) }}">
        </button>
    </div>

With 1.93 I see:

<button id="button-save-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" class="btn sale-notes-updated-button" sprig="" s-method="post" s-action="/dear/dear/update-sale-order-notes" s-indicator="#indicator-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" s-replace="#sale-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" data-hx-headers="{&quot;X-CSRF-Token&quot;:&quot;F2floos4iat1DWHy1wmXkKBbhaG0HyC9wf_IobmMEfBmnDorVlFn1ngfNPXj7SSijlLB81Y_TjjXYjVWtZxKSc5MEcR9rQHwdq-QIoRQpOLa6wLDaET7D_dwaepIq-K1bfnQrapuFjm4uRYFIqhr7tGUcQODTYKi4SOqiarhwPVVHZl4vQXSiRlcphho8K7fn2WB9qls-VetTdIaRXTmjJfm3o-6npHXD1wFU95WNeCUFn8xpvGAIRtKeagfnBQTw3l7pcQMwjiS7oFZ597KkUUdvNa7S9jxB2wZqOdMo-rjCvbPmVxpxPm3-P7042e_UPtNRDs5AKUEKgzN1dUUx-9j8MAwCnYPslcAb4KufnH4KXPyTc82yUGZ8RC2ZJPV644w8gpwnzvFQQrdfs3W0wya556TDC4A2utsXFaYGL-L5hB72X3Hlptg-_rEzIO8LCXRSOJIvf9WasFvB53GuOwZsIqNXoBznH72VClCvtbVgp28j-_UpkYTdGvvH0K68WVKUJeEtndSKzrLJ9hhcaQdNuKlXZt9poj1IaWE5dY=&quot;}" data-hx-post="https://c3-dev.imagescience.net.au/index.php/ghost/actions/sprig-core/components/render?sprig:action=0d7096da265f6837ce3dac82394fcc9fd10adf85eb550311d8692c1d756386fd/dear/dear/update-sale-order-notes" data-hx-indicator="#indicator-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" data-hx-select="#sale-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" data-hx-target="#sale-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" data-hx-swap="outerHTML">
            Save Updated Notes
            <img id="indicator-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" class="progress-indicator htmx-indicator" alt="" src="https://c3-dev.imagescience.net.au/cpresources/6d170aa6/puff.svg?v=1626829851">
        </button>

with 1.10.3 the same button is missing all the data-hx attributes:

<button class="btn sale-notes-updated-button" id="button-save-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" sprig="" s-method="post" s-action="/dear/dear/update-sale-order-notes" s-indicator="#indicator-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" s-replace="#sale-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43">
            Save Updated Notes
            <img id="indicator-updated-notes-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" class="progress-indicator htmx-indicator" alt="" src="https://c3-dev.imagescience.net.au/cpresources/6d170aa6/puff.svg?v=1626829851">
        </button>

[bencroker]

The space in id =" is causing this issue.

        <button
                class="btn visually-hidden sale-notes-updated-button"
                id ="button-save-updated-notes-{{ tag }}"

The HTML spec does allow this, however, so it is an issue with the parser that I will look into. Thanks for reporting!

[bencroker]

I've submitted PR craftcms/cms#9997 to fix this in Craft, although I may add the fix to Sprig directly too.

[bencroker]

Fixed in putyourlightson/craft-sprig-core@cf1a93d and released in version 1.10.4.

[bossanova808]

Thanks Ben. I won't be able to try it out till Monday I'm afraid. Will let you know but I am sure you are right...surprised PHPStorm didn't ding me on that stray space!!

[bossanova808]

Hi Ben

Ok, the fix for the space works. I am still having a problem with an s-val though...athough I am not sure it's a bug as such, just a notable change in behaviour I thought worth raising.

In my component I am setting an s-val (which is by default normally true), to "" - i.e. trying to clear the value, before I hit this particular button and submit the form:

                     <input type="hidden" name="preview" value="true">

                     .... 

                    <button
                            id="send-quick-mail"
                            class="btn submit disabled"
                            sprig
                            s-method="post"
                            s-action="/freshdesk/ticket/quick-mailer"
                            s-replace="#message-preview-{{ tag }}"
                            s-encoding="multipart/form-data"
                            s-val:preview=""
                    >
                        Send Message
                        <img id="indicator-shipments" class="progress-indicator htmx-indicator" src="{{ craft.app.assetManager.publishedUrl('@modules/bridge/assets/icons/puff.svg', true) }}" >
                    </button>

Previously this worked in my controller and $var['preview'] evaluated to false

$vars['preview'] = trim($request->getParam('preview', true));
...
if ($vars['preview']){
  <return a preview>
} else {
 <send message>
}

However, when I inspect the sprig activated button, I see that s-val:preview="" is in there, but further down I can see there is an erroneous data-hx-vals="{"preview":true}"

...and logging this in the controller I am indeed getting true for that value as one would then expect.

It's a quick fix to explicitly change to s-val:preview="false" and the test in the controller of course, but I feel like this should still work really, and might be another issue with the parser?

<button id="send-quick-mail" class="btn submit" sprig="" s-method="post" s-action="/freshdesk/ticket/quick-mailer" s-replace="#message-preview-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" s-encoding="multipart/form-data" s-val:preview="" data-hx-headers="{&quot;X-CSRF-Token&quot;:&quot;Xh5SdcdRA-Hoiv097uRz4KaJktTw0m5eUTB9dIXMdbeYkWxLlYPs88LqCiI22xzm1OIYapuSix4asVhb8xSq-cdF4BCMc5BGTD-73vc4FdCLlG8ijR0HSG4wser5BrQr6r71Eu2eE4EW0dl-wUy6O1bljoVXiZk-DLUd3xaOJ1U1WAwTaq7OCsoEnoWcss4CK-QwWgS2I9kdA5jM5ESAVDhYLsydFg2N5t1jbKkD6NzHxi-4bGhSU5JpiHymRWZhFaNvboQb1CVpIbJ54-cpOAxkCwH3IlK7muuFZ96hR5rl2OG63ZEnJ2l4TSvIowP4rvYbJPjri4C-3zIaAOMsg7XTKVn9p7Mpf4RtYsQmnsHxIIImvBGnf3sJ2uzFDCLnuvFdE-8pY3xcAdLdz2CATYvdwiHU_Cu4dIOjJ7V8yWoMl-_9DbncCnb2TKx4o2QcTGBEIzXjoXyFMvny89-mZViYASYghFr9LDC8gohy2A56PG3_qGdI_K-SElSYSp-GorUa2V0dZAXbCMsfngETA3LHIinlSo1gXUfGAaG9Bn8=&quot;}" data-hx-post="https://c3-dev.imagescience.net.au/index.php/ghost/actions/sprig-core/components/render?sprig:action=862bffb349696e0d92f7fbde88c8a7f7924d6d99b3c5518a8ac3ddcfd577d9d5/freshdesk/ticket/quick-mailer" data-hx-select="#message-preview-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" data-hx-target="#message-preview-12011ef8-d5bb-4c9d-a61d-277ab2ad0f43" data-hx-swap="outerHTML" data-hx-encoding="multipart/form-data" data-hx-vals="{&quot;preview&quot;:true}">
                        Send Message
                        <img id="indicator-shipments" class="progress-indicator htmx-indicator" src="https://c3-dev.imagescience.net.au/cpresources/6d170aa6/puff.svg?v=1626829851">
                    </button>

As I say, easy to work around, but I think the way I am handling Booleans here is not uncommon, so might be worth considering?

[bencroker]

Thanks, fixed in putyourlightson/craft-sprig-core@23b2292 for the next release.

[bencroker]

Released the fix in Sprig Core 1.1.5 which you can get by running composer update.

[rene-haefliger]

I have the same problem here.
Parent:
{{ sprig('shop/category/_categoryProducts', {'categoryId': category.id }) }}

Child:
{{ sprig('shop/category/_categoryProductAddToBasket', {'purchasableId': variant.id}) }

Within Child:
<button data-sprig data-s-vals="{{ { elementId: purchasableId, listTypeHandle: 'wishlist'}|json_encode }}" data-s-method="post" data-s-action="wishlist/items/add" id="add-to-wishlist-{{ purchasableId }}" class="shop-button add-to-wishlist js-tooltip-trigger" data-tooltip-position="bottom" title="Auf Merkliste setzen"></button>

This leads to duplicated attributes: data-hx-headers, data-hx-post, data-hx-vals.

Unfortunately, I can't figure out what the problem is.

[bencroker]

@rene-haefliger this issue is long closed. If the issue persists with the latest version of Sprig then please open a new issue, providing further details and code so I can replicate and test locally.