on:click Doesn't work with href=""

[ZerdoX-x]

Workaround: href=" "

[pateketrueke]

Interesting, I didn't considered that:

Although this question is already answered (tl;dr: yes, an empty href value is valid), none of the existing answers references the relevant specifications. An empty string can't be a URI. However, the href attribute doesn't only take URIs as value, but also URI references. An empty string may be a URI reference.

Thank you, I'll be fixing it soon!

[ZerdoX-x]

Version: "yrv": "0.0.33"

So after updating yrv my workaround doesn't work

<Link button on:click={() => alert('clicked!')} href=" ">
  ...
</Link>

Gives Uncaught Error: Expecting '/ ' or '# ', given ' '

Other options don't work either (there are no actions on clicking):

<Link button on:click={() => alert('clicked!')} href="">
  ...
</Link>

<Link button on:click={() => alert('clicked!')}>
  ...
</Link>

[ZerdoX-x]

And I guess README.md example with button also is broken https://github.com/pateketrueke/yrv#link-go-href-open-title-exact-reload-replace-class-

<Link on:click={() => location.reload()}>Reload</Link>

[ZerdoX-x]

Tested it out: readme example works because it has not button prop But if you pass button prop, button will have disabled attr

[pateketrueke]

Interesting, buttons are disabled if they're active, because they are used to navigate, the same as for regular links: it won't trigger the same action twice, hence the disabled attribute on buttons.

IMHO I would not use links or buttons if they're not for navigation, probably I'll remove the example too as it leads to unwanted behaviors.

[ZerdoX-x]

Yeah that's makes sense:

Button are disabled if they're active

So when I don't pass href prop, my button can't be active (so it can't have disabled prop at all) And here comes the problem. Button without link can't be disabled by default. It should be enabled by default and only disabled when prop "link" matches current location

[pateketrueke]

We could add a nohref attribute to stop the button acting this way, but that's the point, why not just use a regular button instead?

[ZerdoX-x]

The problem is that default value "" (empty string) of a prop link triggers active state. Maybe need to change default value or how "active" variable value is calculated

[pateketrueke]

I still don't see the point of using empty href because that means linking to the current page, I know is valid and possible, but why you'll need an empty href?

After all, Link is a wrapper around simple <a> and <button> tags, if those are not being used for navigating through your defined routes they're not links then.