3 ms·

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)

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.

apsurd 2y ago
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>
Andrex 2y 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. preventDefault and stopPropagation?
- andypants 2y ago
  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.
  - extra88 2y ago
    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_forms_through_JavaScript https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending...
AlienRobot 2y ago
Maybe you should file a bug on HTMX.

apsurd 2y ago

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>

Andrex 2y 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. preventDefault and stopPropagation?

andypants 2y ago
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.
- extra88 2y ago
  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_forms_through_JavaScript https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending...

AlienRobot 2y ago

Maybe you should file a bug on HTMX.