[BUG] Unable to scroll within a formio-builder container while drag and dropping

[MariePetit]

Environment

• Hosting type
  • [x] Form.io
• Formio.js version: 4.14.8
• Frontend framework: React, TS
• Browser: Chrome, Edge. Firefox

Steps to Reproduce

1. Have a max-height given to the formiobuilder with an overflow: auto.
2. Fill the form with some components to create an overflow and have a scrollbar.
3. Once you have an overflow/scrollbar, grab a component from the components menu and while dragging, use the mouse wheel to scroll up and down the form.

Expected behavior

While holding a component in drag and drop mode, the user should be able to scroll up and down in the container.

Observed behavior

While holding a component in drag and drop mode, the user is unable to scroll up and down in the container.

Example

Live example here on Codesandbox:

Contextual information:

In our application, we are implementing the FormIO builder and only its container is scrollable with an overflow auto. While dragging, if the user tries to navigate the form with the scroll wheel to drop a component at a specific location, the page does not scroll up or down.

[abu-osos]

Have the same issue, is there any fix for this?

[daneformio]

Thank you for reporting this issue. I am able to reproduce it and have logged a ticket for the backlog. We are always willing to review any contributions to resolve this issue from the open-source community.

For internal reference: FIO-8673

[heather-formio]

@abu-osos @MariePetit While we see this in the code sandbox, it seems that some of the styles may not be implemented that are needed for this functionality. As it is working here https://formio.github.io/formio.js/app/builder.html, we will need more information on how the builder is embedded within the app to comment any further. Please feel free to comment with more information on the specific use case.