ElFinder inside a <form> reloads the entire page when pressing and and clicking on buttons

[blutorange]

Describe the bug

This was once mentioned in #3184, but I'd consider it a bug (and one that is not hard to fix, see below).

When ElFinder is used within a <form> component, clicking on any button (such as in the resize dialog) or pressing enter in an input field (such as the search bar) submits the form, causing the current page to unload. This makes ElFinder unusable. Some frameworks / UI libraries require the use form <form> and as such, make it hard to integrate / use ElFinder.

To Reproduce

For buttons:

1. Goto https://studio-42.github.io/elFinder
2. Open the dev console and run $("#elfinder").wrap("<form>")
3. Go to Writable volume group -> Img + Txt Only -> New folder
4. Right click on code.png, click on Resize & Scale
5. Go to the Crop tab and click on the aspect ratio lock button (with the lock icon, next to the width / height)
6. The page tries to reload, a confirmation dialog pops up asking the user if they really want to leave the page

For input fields:

1. Goto https://studio-42.github.io/elFinder
2. Open the dev console and run $("#elfinder").wrap("<form>")
3. Click in the searchbar, then press enter
4. The page reloads

Expected behavior

The page does not reload, the is is not asked for confirmation whether they wish to leave the page.

Suggested solution

On a technical level, the solution to both issues is simple:

• For inputs, simply call event.preventDefault.
  • Another standard way to prevent submission on enter is to e.g. add a <button type="submit" class="Hidden" onclick="return false;" /> at the start of a <form>. This can already be done by users, so I would not consider this part too important.
• For buttons: Simply add type="button" to the <button> elements, this will prevent the submission. By default, the type attribute defaults to submit, which I would argue is not correct.
  • This part I consider more important, since it is quite hard to work around. ElFinder uses event.stopPropagation, which makes it hard to register custom event listeners that call event.preventDefault. It's possible to use the capturing phase instead, but it's still a hack.

Screenshots

Screencast.from.2024-10-09.20-43-09.webm

Screencast.from.2024-10-09.20-44-16.webm