Unexpected behaviour using Partials and TSX Tabler Icons

[Nordalf]

Hello,

First: Thanks for developing Fresh. I enjoy working with the framework.

I am teaching myself Deno & Fresh, and as nearly every web application today, I have built a sidebar with navigation anchors. As many SPA's, I only want to change the 'middle'-content without reloading the sidebar. I have wrapped my content into a <Partial... /> and provided the parent node with the f-client-nav. But whatever I do, every file is downloaded.

Each anchor point in my sidebar consists of an TSX Tabler Icon and a <span />. By an accident, I realised this morning, that only when I click the span and avoid clicking the Icon, everything works as expected.

Does the icons trigger some sort of events I am unaware of?

I have attached a small video illustrating the issue.

https://github.com/denoland/fresh/assets/8970495/1f4dc68a-e64a-465b-89a4-a9997dc2a2ad

The below code is the anchor point - I am clicking on the video - showing the use of <IconHome....

<a class="flex md:flex-col items-center py-2 cursor-pointer gap-1 dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-0 hover:border-transparent hover:rounded-xl md:disabled:pointer-events-none" href="/">
  <IconHome class="w-12" />
  <span class="md:text-xs">Home</span>
</a>

Thanks in advance.

[marvinhagemeister]

Where did you set the f-client-nav attribute? To make a link trigger a partial navigation it either itself or one of the parent nodes should have this attribute. Based on your description it sounds like you placed it on a parent of the partial component, but not on a parent of the navigation on the left side.

[Nordalf]

Where did you set the f-client-nav attribute? To make a link trigger a partial navigation it either itself or one of the parent nodes should have this attribute. Based on your description it sounds like you placed it on a parent of the partial component, but not on a parent of the navigation on the left side.

I have added the f-client-nav in the body-tag. Based on the documentation:

By adding the f-client-nav attribute, we enable partials for every element beneath the -tag.

I assumed this would be enough?

[marvinhagemeister]

Ok, based on the information shared, we know so far is that there is a f-client-nav attribute on the body-tag and that there is a <Partial> component around the main content area. Then there is some sort of TSX Tabler Icon (assuming this is an icon component or something like that) and a <span /> tag inside the link. I'm assuming that this is similar to the snippet you shared:

<a class="..." href="/">
  <IconHome class="w-12" />
  <span class="md:text-xs">Home</span>
</a>

In the video we see that the images etc of the main content are reloaded, which like you said indicates that something is not working. Those are all the information I could collect so far. I'm not sure if this is enough to pinpoint the problem. I tried re-creating a similar site, but I'm unable to reproduce the problem.

Is something logged to the console by chance?

[thegaryroberts]

It seems if you click on an svg (e.g from a tabler icon) within an anchor, the href is followed but the f-partial nav feature is not triggered.

If you click outside the svg but still within the anchor (e.g in the border area or text), it works as expected 🤷🏻‍♂️

[thegaryroberts]

You can set the following css to prevent this undesirable behaviour:

svg { pointer-events: none; }

or in tailwind

pointer-events-none