[4.0.0-alpha8] BUG: hx-target not working on Unicode id (e.g. id="foo-中文")

[YamiOdymel]

An HTML id attribute can contain Unicode characters, but HTMX does nothing if id contains Unicode characters (or 😭emoji).

<div id="container-中文">
    <form hx-post="/action/follow_topic" hx-target="#container-中文" hx-swap="outerHTML">
        <button type="submit">Follow Topic 🎉</button>
    </form>
</div>

[MichaelWest22]

I thought it could be that since this is not an id but a standard CSS selector that maybe it would need some css escaping to make it valid. But actually as long as it is just standard utf-8 unicode it just works as a css selector like this fine. Testing your posted html snipit on alpha8 build and it works fine for me. You might have a unicode encoding issue on your backend solution or template files maybe? Try generating a straight html file to test this.

Also note that most of the time you use an id for htmx target selection you can actually use any of the great relative selectors htmx has built in like closest:

<div id="container-中文">
    <form hx-post="/action/follow_topic" hx-target="closest div" hx-swap="outerHTML">
        <button type="submit">Follow Topic 🎉</button>
    </form>
</div>

[YamiOdymel]

@MichaelWest22 Hmm, weird. I tried using a brand-new test .html file with the Alpha 8 build, but the problem still exists (even with the closest selector). HTMX does nothing when there is Unicode in the id, and it also doesn’t output any error message.

Demo video:

bandicam.2026-05-01.06-45-55-424.mp4

Thanks for the note, by the way. I love seeing extra information every time you reply.

[MichaelWest22]

Strange I can't reproduce this at all using the same html you have there. The error causing the problem will likely be showing in your console where any exceptions may be posted. Can you try also enabling full htm loggin and then click the button. in console just paste htmx.config.logAll=true and then click the button to view all the htmx event logs which may give more error details

[YamiOdymel]

@MichaelWest22 Great, I saw the error message now. Chinese characters and Emoji causes the same error. I'm using Traditional Chinese Windows 11 / Chrome 147

$ htmx.config.logAll=true
> true

> htmx:config:request
> htmx:before:request
> htmx:error 
> TypeError: Failed to execute 'fetch' on 'Window': Failed to read the 'headers' property from 'RequestInit': String contains non ISO-8859-1 code point. at #issueRequest (https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha8/dist/htmx.js:531:42) at #handleTriggerEvent (https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha8/dist/htmx.js:496:37) at HTMLFormElement.<anonymous> (https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha8/dist/htmx.js:329:51)
> htmx:finally:request

[MichaelWest22]

Great thanks! Yeah looks like we send the raw ID of the target and source in request headers for backends to make id based decisions on and in htmx 2.0 we have a encodeURI fallback if XHR header rejects the format. In 4 we now use fetch which has no exact equivalent set header validator so we need to encode just this id. I think we can use encodeURI() for id every time as this should only encode things we want to protect.