Hacker News new | ask | show | jobs
by andypants 562 days ago
Tried this today and came across an issue that I could not get around: if the dialog contains a form, then submitting the form with enter (focused on any input) or space (focused on the submit button) will close the dialog. I couldn't find any nice way of preventing it.

Normally a form will reload the page anyways so I guess this isn't a normal problem but I was using htmx.

3 comments

Your last sentence is likely right, by default the form issues a network request.

I've been using a dialog form to update an iframe (it's an editor) so it does work as normal the target iframe gets reloaded. It does not close the dialog though.

I can't produce the case where hitting enter closes the dialog. It should be the same as `<button type='submit'>submit</button>` which also does not close the dialog.

FWIW I learned yesterday that a button _can_ close the dialog:

    <button formmethod="dialog">Update & Close</button>
> Tried this today and came across an issue that I could not get around: if the dialog contains a form, then submitting the form with enter (focused on any input) or space (focused on the submit button) will close the dialog. I couldn't find any nice way of preventing it.

preventDefault and stopPropagation?

There's no event for the dialog about to close, only an event for after the dialog closes. You can prevent default on the enter key and space key, but that obviously breaks the form ux.

There is an event for the dialog about to close from pressing the escape key. No idea why it's only for closing via escape key.

I think they meant prevent the form submission on the `submit` event and use JavaScript to make the submission.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending...

Maybe you should file a bug on HTMX.