Dropdown Options Not Scrolling in Jodit Editor When Used Inside React Modal/Dialog

[subin989]

Issue

Jodit Version: 4.xxxxx

Browser:

OS:

Is React App: True

Reproduced on xdsoft.net: False

Description:

When using Jodit editor inside a React modal or dialog component, the editor's dropdown options are not scrolling properly. This issue prevents users from accessing all dropdown options when there are more options than can fit within the visible area of the modal.

Expected Behavior:

The dropdown options in the Jodit editor should be scrollable within the modal or dialog component.

Actual Behavior:

The dropdown options are not scrollable, making it impossible to access all options when there are too many to fit in the visible area.

[Arkanii]

Same issue here

[Arkanii]

After investigation it seems that the structure of the body when Jodit is used in the modal is:

• <div id="main">
• <div class="modal"> : there is the Jodit instance inside
• <div class="jodit-box"> : it needs it many times: dropdowns, popover, etc

The modal has priority over all, and clicking on a jodit-box is considered as clicking outside the modal and closing it
And the modal I use (shadcn with radix) adds on the body the css pointer-events: none; and this causes the bug because it prevents clicking above the modal

One solution is to put all the <div class="jodit-box"> not at the bottom of the body element but elsewhere, in the jodit-react-container (or root ?) element for example to have the dropdown in the modal.

[JohannaYaggo]

I have the same issue too ! It's not just about the scrolling but we can't click on an element inside the dropdown neither.

[Arkanii]

Hello @xdan, a fix is planned for that bug ? Thanks a lot ! 🙏🏻