Best way to keep focus in the input box that was just swapped

I would like the input box be focused while doing inline validation with keyup trigger.

For example:

<input 
  class="input is-danger" 
  name="name" 
  type="text" 
  value="Invalid value" 
  hx-trigger="keyup changed delay:300ms" 
  hx-target="this" 
  hx-swap="outerHTML" 
  hx-post="/validate" 
  hx-params="name">

This works and the dom gets swapped if the user has not entered anything in 300ms. But once its swapped the input focus is lost, so the user cant keep editing to correct the mistake.

I’ve tried using the event system, but it seems like some of the event listeners are not getting registered.

htmx.on("afterSettle.htmx", function(e) {
  console.log("This did not print");
});

However load.htmx did work.

[1cg]

OK, first attempt at an id based fix for this:

https://github.com/bigskysoftware/htmx/commit/2ac221bdbc1f8ae22b10b36d3ad7666f07c663b4

[bencroker]

Ok @kzbt, i see what you mean now. I was going to explore using afterSwap to reset the focus, but there is a bug in which that event is not called https://github.com/bigskysoftware/htmx/issues/79#issuecomment-639399013.