Does Halogen URI encode href properties?

I’m honestly not sure if this is a Halogen issue; really just figuring out what the cause is would be a huge help. I’m making a little webapp to learn frontend development, and am trying to create a link to another website, which may contain Japanese characters in the url, in the form www.example.com/search?q=こんにちわ, but when I mouseover/click the url in the browser all the Japanese characters have become encoded instead like 番, which the external site can’t interpret.

At first I thought the href combinator in Halogen might be changing the url, but when I used the inspect function in Google Chrome to see the generated html it does show the literal Japanese characters. So I thought it might be the browser, but I get the same results in other browsers, and when I made a static html file with the link it does contain the actual Japanese characters. It’s only when the site is generated by Halogen that the links don’t work, so now I’m thinking it might be Halogen somehow still URI encoding things despite it not showing up in the DOM.

But looking at the href in the Halogen source code I can’t see anything that might be possible; it seems like it just wrap things in newtypes, and calls propFromString, which is just implemented as unsafeCoerce. So at this point I’m really just stumped if it’s a Halogen thing, or a javascript thing, or what, and without having an idea of what’s causing the issue I have no idea where to look.

Firefox doesn’t exhibit this behaviour, although I was able to replicate it with Chrome.

It does indeed appear that the URI is being mangled when it’s set via JS. Setting the page’s encoding (<meta charset="utf-8">) seems to fix it.

1 Like

Awesome, that fixed it for me too. Thanks so much :slight_smile: