Checkboxradio (e.g. resize dialog tabs) not working properly when elFinder is inside <form> element

[blutorange]

Describe the bug

The image resize dialog uses jQueryUI's checkboxradio widget for the selection between resize, crop, rotate.

When elFinder is inside a <form> element, switching between these tabs works, but the UI is not updated properly: the selected tab does not get highlighted.

Taking a look at the DOM, you can see that the ui-state-active class does not get removed from the non-active elements when switching between tabs.

Cause

The technical cause of this bug is that JQueryUI only checks for a containing form upon initialization of the widget, but elFinder initializes the checkboxradio before the element was added to the DOM. In detail:

• The checkboxradio widget has a _toggleClasses method that calls this._getRadioGroup() in order to remove the ui-state-active class from non-active tabs.
• _getRadioGroups() checks whether the radio input is inside a form. For this check, it accesses its this.form property; which should contain a reference to the containing form.
• However, the form property is set at widget initialization time. At this time, elFinder did not add the element to the DOM yet, so jQueryUI does not find a form.
• Ultimately, this results in _getRadioGroups() not finding the other inputs, and so the ui-state-active class does not get removed.

Suggested solution

Initialize the checkboxradio widget only once the element was added to the DOM. This way, JQueryUI can find the form, resolving the bug.

To Reproduce

Steps to reproduce the behavior:

0. Ensure that elFinder is inside a <form> element
1. Go to a folder with an editable image
2. Right click -> resize & rotate
3. Switch between resize, crop, rotate
4. Non-active tabs are displayed as active

You can also reproduce this on the official showcase https://studio-42.github.io/elFinder/ by wrapping elFinder in a form via $("#elfinder").wrap("<form>") and then opening the resize dialog:

Screencast.from.2024-12-02.11-59-57.webm

Expected behavior

Only the active tab is displayed as active.

Desktop (please complete the following information):

• OS: Linux xm-awa-mobil 6.8.0-35-generic #35-Ubuntu x86_64 x86_64 x86_64 GNU/Linux
• Browser Version 131.0.6778.85 (Official Build) (64-bit)