best way to trigger JS to focus an input text field that was newly swapped in

this seems to be a common use case.

so I have a section of the page swapped with multiple elements that can include multiple <input> fields

but I want to focus only one of these fields, i.e. the cursor should be within a specified text field, and positioned after any text value that may be present

I’m finding it hard to figure out the best way to achieve this, I know afterSettle may be involved: https://htmx.org/events/#htmx:afterSettle

do suggest what you think would be the best / most elegant way to handle this

[benpate]

Yes, it should. It there are any other nodes still in the DOM that have “autofocus”, they should have already gotten their chance to be focused. The pull request just scans the NEW content for the first “autofocus” attribute it can find. If there are any, then it calls .focus() on it.

Check it out, then nag @1cg to merge it 😉

[benpate]

HTMX has mechanisms for spinners when waiting for something to load over the network. Though it doesn’t have that for setting up a web socket connection, it could be added if necessary. You can set up a dynamic WebSocket/SSE declaratively when HTMX swaps in the partial markup sent back by the server. This part works great – although I think there’s still some work to be done in disconnecting a WebSocket/SSE when its root node is swapped out. I still need more research here.

I think this is my long-winded way of saying that I’d look into other ways to add “before” code into the call. That would mean that any javascript included along with a partial HTML could just run “after” it’s loaded, and we wouldn’t need the distinction, and we could keep the API as simple as possible.

For nasty errors and edge cases, eval() potentially opens up security issues inside of HTMX. Although it’s a relatively low risk, I’d suggest we find some sort of “safe eval” to implement. I know (for example) Angular had some mechanism for this, so it should be simple to research.

I agree with @ptrthomas, adding CSS sounds like a similar situation that we could explore here. From work in other environments, I think that browsers automatically use any CSS you dynamically add to the DOM, but the same is not true for Javascript. Either way, it would be nice to do some experiments and see how HTMX could make both of them “just work.”