UI breaks accesing Watermark tab or using moreSaveOptions

[rostagnolisandro]

I've made this simple example to show the issue:
https://jsfiddle.net/hamzdjLe/1/

Just click on the "Watermark" tab and after that it's not possible to click anyware on the image editor. If you scroll down to the bottom of the page, you will see the options "upload watermark" and "add as text" that were supposed to be hidden and shown only when clicking "Add watermark".

The same happens if you specify the option moreSaveOptions, I've made this simple example:
https://jsfiddle.net/hamzdjLe/

Notice how it's not possible to click on anyware on the image editor. If you scroll down to the bottom of the page, you will see the two save options that were supposed to appear when the "save as" button is clicked. But they are shown right away in the image editor initialization, and for some reason I can't figure out, it breaks everything and it's not possible to use the editor.

Am I doing something wrong? What am I missing?

[RUiNtheExtinct]

The same happens in the react vertion as well

Issue caused by that SfxPopper right over there, but cannot remove it either as that removes the entire overlay.

A lower z-index works but the watermark dropdown is still rendered at the bottom of the page.

Each of the divs within SfxPopper have these overlay class divs within that draw over the entire page and block all of the UI.

[fedotovdev]

.+ 1 here, the same on preview library website - https://scaleflex.github.io/filerobot-image-editor/

[nialloc9]

Same issue, totally freezes and does nothing.

[rostagnolisandro]

I've temporarily changed my app so it uses version 4.8.1 and it works great there. Not sure what changed from 4.8.1 to 4.9.0 that could break the UI like this.
I'm inspecting changelog to figure out, but I'm totally new at Filerobot, I'm using it since last week so I'm just getting familiar with things :/

[RUiNtheExtinct]

I've faced similar issue in even the 4.8.1 version.

[RUiNtheExtinct]

Added PR to fix the same - #517

[rostagnolisandro]

Great news! Thanks for sharing this!
I'm using the JavaScript version of the library and would love to test this change to see if it resolves the issue. Do you have an estimated timeline for when this will be included in a new release? Alternatively, could you kindly guide me on how to manually apply the fix in the meantime?
I reviewed the PR you made, and while it seems straightforward, I’m having trouble identifying the exact changes I need to make. I’d be happy to implement a temporary fix manually if you could point me in the right direction.
Thanks again!

[RUiNtheExtinct]

The ButtonWithMenu component is open by default, just set it to not do so as was done in the PR.
Basically it should be closed by default and only open on click.

[AhmeeedMostafa]

Hey @rostagnolisandro @nialloc9 @RUiNtheExtinct @fedotovdev I've merged @RUiNtheExtinct 's PR (thanks for your collaboration), and it's released on v4.9.1 please check it and if there still any conflict with the behavior please re-open the issue.