search

scaleflex / filerobot-image-editor

Edit, resize, and filter any image! Any questions or issues, please report to https://github.com/scaleflex/filerobot-image-editor/issues
MIT License
1.37k stars 341 forks source link

Some actions reload page #195

Closed smileBeda closed 2 years ago

smileBeda commented 2 years ago

I see a strange behaviour, whereas some actions (like "previous" or "show original image" or increase/decrease zoom), try to navigate away from the page, by reloading it, instead of just doing the action supposed to happen.

In plain JS I would say the click event.preventDefault is not set. But I am wondering if that is perhaps related to missing configs? I use the plain example from https://github.com/scaleflex/filerobot-image-editor#vanillajs-example

AhmeeedMostafa commented 2 years ago

Sorry I didn't get your issue, please provide some reproducing steps with codesandbox generates ur issue or a video showcasing your issue at least

smileBeda commented 2 years ago

Here's a Video:

https://user-images.githubusercontent.com/11800236/165307471-7b2ac61a-4f0b-4f8c-954d-83bdb15b7aba.mov

Steps:

That usually happens when a href's do not have a event.preventDefault set, but, since those are no real HTML links, I am not sure what the cause is...

AhmeeedMostafa commented 2 years ago

@TukuToi such an issue is not producible from our side and seems really strange, please provide more info about which browser u are using and its version, and add a codesandbox example that contains that issue to be able to catch it also what if you clicked (leave page) where will u redirected? also make sure you are not setting some event listener from ur side!

smileBeda commented 2 years ago

I found the cause. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type

I use the FileRobot inside a Form, because that is where the user will have to edit the file. All things in FileRobot are buttons, but none specifies its type. Thus - all those buttons will try to be of type submit and try to submit their parent form.

This should if possible be adjusted in the FileRobot Code. It is not unusual to have file upload and editors in forms, prior to submission of a larger chunk of data.

For now, I can work around this by putting the FileRobot outside the form tag, but I am sure fixing this in FileRobot will bring benefit. All that's needed is that all button tags specify their type, which probably will be button in most cases.

For example:

<button color="link" title="Zoom out" disabled="" class="sc-lxwit0-2 sc-10edh45-0 beGRgj sc-21g986-2 czVnoX SfxButton-root SfxIconButton-root"><svg width="14" height="14" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.27478 28.001H47.2746C48.9318 28.001 50.2749 26.6579 50.2749 25.0003C50.2749 23.3431 48.9322 22 47.2746 22H3.27478C1.61803 22.0004 0.274902 23.3435 0.274902 25.0007C0.274902 26.6579 1.61803 28.001 3.27478 28.001Z" fill="currentColor"></path></svg></button>

This should become 

<button type="button" color="link" title="Zoom out" disabled="" class="sc-lxwit0-2 sc-10edh45-0 beGRgj sc-21g986-2 czVnoX SfxButton-root SfxIconButton-root"><svg width="14" height="14" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.27478 28.001H47.2746C48.9318 28.001 50.2749 26.6579 50.2749 25.0003C50.2749 23.3431 48.9322 22 47.2746 22H3.27478C1.61803 22.0004 0.274902 23.3435 0.274902 25.0007C0.274902 26.6579 1.61803 28.001 3.27478 28.001Z" fill="currentColor"></path></svg></button>

This is the right thing to do anyway, as MDN States:

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

AhmeeedMostafa commented 2 years ago

@TukuToi It is not logical to set the image editor inside form, so having the editor outside of the form is not a workaround but a proper/logical step