Skip to content
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.

Sign up for GitHub

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

Jump to bottom

svg title used as document title after refreshing sprig component #144

Closed
aloco opened this issue Aug 25, 2021 · 10 comments
Closed

svg title used as document title after refreshing sprig component #144

aloco opened this issue Aug 25, 2021 · 10 comments
Labels
question Further information is requested

Comments

@aloco
Copy link

aloco commented Aug 25, 2021

Question

Hi Ben.

When using an inline svg within a sprig component, the title of the document gets overwritten by the svg´s title. We are using craft´s svg function and setting a title there. https://craftcms.com/docs/3.x/dev/functions.html#svg

It seems like htmx is looking for title in selectAndSwap and picks the title from the svg as document title.

Thanks for your advice

Additional context

you can reproduce this by using a svg with title in a sprig component like this

            {{svg("icons/ic_bookmark", "Bookmark"|t)}}
@aloco aloco added the question Further information is requested label Aug 25, 2021
@bencroker
Copy link
Collaborator

bencroker commented Aug 25, 2021 •
edited
Loading

As you correctly pointed out this is an issue with htmx which seems like it was fixed in bigskysoftware/htmx#459. Are you running the latest version of Sprig and loading htmx 1.5.0?

@aloco
Copy link
Author

aloco commented Aug 26, 2021

I just updated to Sprig 1.8 which is loading htmx 1.5.0 but still seeing this issue

@aloco aloco mentioned this issue Aug 26, 2021
Closed
@bencroker bencroker reopened this Aug 26, 2021
@bencroker
Copy link
Collaborator

bencroker commented Aug 26, 2021 •
edited
Loading

Can you show me the output of using the SVG function? Craft doesn't add the title, so it is probably embedded in your SVG file.

@aloco
Copy link
Author

aloco commented Aug 26, 2021

Hi I just double checked the SVG Files and the output.

This is the SVG file:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.2222 3H5.77778C5.5715 3 5.37367 3.0862 5.22781 3.23964C5.08194 3.39308 5 3.60119 5 3.81818V20.1818C5 20.3279 5.03716 20.4713 5.10763 20.5971C5.1781 20.7229 5.2793 20.8266 5.40074 20.8974C5.52217 20.9682 5.6594 21.0036 5.79819 20.9997C5.93698 20.9959 6.07227 20.953 6.19 20.8756L12 17.0555L17.81 20.8756C17.9277 20.953 18.063 20.9959 18.2018 20.9997C18.3406 21.0036 18.4778 20.9682 18.5993 20.8974C18.7207 20.8266 18.8219 20.7229 18.8924 20.5971C18.9628 20.4713 19 20.3279 19 20.1818V3.81818C19 3.60119 18.9181 3.39308 18.7722 3.23964C18.6263 3.0862 18.4285 3 18.2222 3ZM17.4444 18.7091L12.4122 15.4004C12.2886 15.3191 12.1458 15.276 12 15.276C11.8542 15.276 11.7114 15.3191 11.5878 15.4004L6.55556 18.7091V4.63636H17.4444V18.7091Z" fill="currentColor"/>
</svg>

This is the output of {{svg("icons/ic_bookmark", "Bookmark"|t)}}

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<title>Bookmark</title>
<path d="M18.2222 3H5.77778C5.5715 3 5.37367 3.0862 5.22781 3.23964C5.08194 3.39308 5 3.60119 5 3.81818V20.1818C5 20.3279 5.03716 20.4713 5.10763 20.5971C5.1781 20.7229 5.2793 20.8266 5.40074 20.8974C5.52217 20.9682 5.6594 21.0036 5.79819 20.9997C5.93698 20.9959 6.07227 20.953 6.19 20.8756L12 17.0555L17.81 20.8756C17.9277 20.953 18.063 20.9959 18.2018 20.9997C18.3406 21.0036 18.4778 20.9682 18.5993 20.8974C18.7207 20.8266 18.8219 20.7229 18.8924 20.5971C18.9628 20.4713 19 20.3279 19 20.1818V3.81818C19 3.60119 18.9181 3.39308 18.7722 3.23964C18.6263 3.0862 18.4285 3 18.2222 3ZM17.4444 18.7091L12.4122 15.4004C12.2886 15.3191 12.1458 15.276 12 15.276C11.8542 15.276 11.7114 15.3191 11.5878 15.4004L6.55556 18.7091V4.63636H17.4444V18.7091Z" fill="currentColor"></path>
</svg>

We can mitigate this issue by removing "Bookmark"|t -> the issue is gone when we do so, but anyhow htmx shouldn´t use a title as document title when its not within <head>

@bencroker
Copy link
Collaborator

Thanks, I've created an issue specifically for this at bigskysoftware/htmx#576.

@terryupton
Copy link

@bencroker is this fix likely to be rolled out soon?

@bencroker
Copy link
Collaborator

I believe it was released in htmx 1.6.0, which Sprig 1.9.0 requires.

@terryupton
Copy link

In that case I'm still seeing the same issue or similar if not the same. Whereby the page title changes to that of the first svg on the page. I'll write this up in more detail tomorrow.

@aloco can you confirm if you still see the same issue? Or if resolved?

@bencroker
Copy link
Collaborator

Can you double check what version of htmx is being loaded into the page?

@terryupton
Copy link

Hi Ben. Yes, you are right. htmx 1.6.0 and sprig 1.9.0 fixes this.
I thought I was up to date as no updates were showing, but have rechecked this morning I was actually on the dev/pagination branch we tested. I have update to 1.9.3 and all working as expected.

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@terryupton @aloco @bencroker