preventing inactive form elements

[igor47]

I've built site with many dynamic forms. I've been using a pattern like this:

<form
  hx-post="/myForm"
  hx-vals='{"is_check": "true"}'
  hx-trigger="change"
>

and then my submit button is something like:

<button
  type="submit"
  hx-vals='{"is_check": "false"}'
  hx-post="/myForm"
>
  Submit
</button>

the requests with is_check perform validation and dynamic form updating (e.g. if the contents of a field change depending on the value of a different field), and is_check: false perform submission.

the fact that my form is re-rendered whenever the contents change causes several problems. this is especially apparent with <input type="text" elements. with a flow like:

1. edit a text field
2. interact with a submit button or a <select element

step 2 is a little odd. the blur event of the text field causes the change event of the form to trigger, which submits the form data and re-renders the form. this means that if at step (2), i click on a select, the select will flash open, then close as it's re-rendered by the browser. likewise, if at step (2) i click on the submit button, nothing happens. this is i think because the element is currently being re-rendered -- maybe there's no button even there to click on for a moment?

i've tried to solve this problem in several ways.

1. for select dropdowns that are not dynamic, i've been adding hx-preserve. but if the contents of the select do change based on the input, i obviously can't do that.
2. for the submit buttons, this is a more annoying problem, since it just kind of feels like the button doesn't work and you get no feedback. i tried adding hx-sync="closest form:replace" to the submits, but this on it's own is not enough. the blur event seems to have already been dispatched, and it's too late to replace the is_check submit. it seems to work when i combine the parent form's change with hx-trigger="change delay:100ms" , with the 100ms somewhat experimentally derived. 50ms seems too slow. but this pattern seems kind of ... hacky?

curious if i'm missing something obvious. am i just doing it wrong, or is there a solution for this, idk what to call it, "flash of noninteractivity" (kind of like the old-school flash of unstyled content).

[Tc-001]

You may want to have a look at https://htmx.org/extensions/idiomorph/
Where instead of the submit swapping the whole innerhtml, it tries to preserve as much of it as possible, only changing the elements that are actually different.

[igor47]

thanks for the recommendation; the ideomorph extension definitely helps in some cases, especially in the case of search-as-you-type fields where the change keyup` trigger would cause the input to lose focus.

however, it doesn't seem to help with either of the issues i described above. editing a text box and then clicking on a select still causes the select to close, even though it has an id. video:

Screencast.From.2025-11-11.15-44-36.mp4

likewise clicking the submit button if i've just edited an input still causes the form's hx-post and not the submit button's hx-post to trigger. you can see it here -- my form's validation does not treat empty fields as errors (the user hasn't gotten there yet), but submission does treat missing required fields as an error. in this video, when i click submit after editing a text field, the name error disappears, because instead of submit the validation is triggered instead:

Screencast.From.2025-11-11.15-48-42.mp4

[MichaelWest22]

Yes this is a known issue in idiomorph as it will overwrite input values every time and ignore user input changes. Great for resetting forms but not ideal most of the time. Someone a while ago proposed retaining user input on morph but this would be kind of a breaking change in behavour. I have a PR up bigskysoftware/idiomorph#146 that resolves this by adding a new idiomorph option to keep the inputs preserved and has a good performance optimization around this as well. Would be good to test this PR version with your situation if possible. Also htmx4 which is under active development right now has built in morph right now in the current Alpha that should always preserve input values as well you could test out.