Overlay Widget Jump Stutter

I had this issue and the patch solved it for me! Using 2.0.0-beta9 on core 9.3.12 with bootstrap_layout_builder 2.0.1.

Because of the "jump", I wasn't able to select a column % in the overlay dialog (of a layout paragraph type). But now smooth scrolling.

Commenting code is not a good idea, it could be removed. Anyway, the solution works,

I think this is a topic which might better be solved upstream in core?

Core modals are not a thing Drupal should be proud of ... ;)

I'm experiencing this as well on 2.0.1.

Couple notes:

• Patch does not apply to 2.0.1, (and presumably 2.0.x-dev, but haven't tested yet)
• The setInterval call was introduced as a fix for #3252978: Large modal exceeds viewport height without scrollbar = actions unreachable. I'm guessing that removing it will re-introduce that issue

I'll also confirm that this seems to be happening for me as well on 2.0.1

Adding re-rolled patch for 2.0.x-dev, Creating js transpiled versions of the es6 js file showing lot more changes. Possibly due to npm version, so keeping it by manual updation in file.

"Is anyone else having this issue?" Yes i have same issue
Patch #9 works for me (Drupal 9.4.8; PHP 8.1.11; Layout Paragraphs 2.0.1)

I've noticed that this does not happen on all my Layout Paragraph 2.x modals to the same degree. For me, it's worst on a modal that is fairly small to begin with (near screen height) and then expands (for example with collapsed or tabbed Field Groups). However for some others, like one that is quite long, the jump is minimal and only on maybe one of the Field Group tabs.

The patch in #9 apples cleanly for me on 2.0.1 and solves the problem. I think it's a heavy handed fix given that the repositioning of the modal is probably in there for a reason. But without it, I would be blocked without some sort of workaround.

Confirmed #9 is working for me: PHP 7.4, Drupal 9.4.8

Also confirming #9 worked for me: PHP 8.1.13, Drupal 9.4.8, and layout_paragraphs 2.0.1. Nice flow no stutter.

The patch in #9 seemed to initially fix the jump stutter for us. It works well for the dialog that LP presents.

Context:
Drupal 9.4.8
Layout Paragraphs 2.0.1
Media Library
Admin Theme: Seven / Claro

I did discover an issue with this, and I'm sure it's related to the core modal since this exists both in Seven and Claro themes.

On node of bundle 'page' I have a field called `field_content_sections`, which is an Entity Reference Revision field pointing at paragraphs.
One of the paragraphs we reference, `document_listing`, has an entity reference field that points to Media - Document. We utilize the Media Library widget for the form display of this field.

When adding a document list paragraph via LP the dialog that LP creates resizes as expected. When I click to "Add Media" it pops open the core modal over the LP dialog. I can see the Insert buttons and can select media items. I can also see the button on the LP dialog to save.

After adding a file to the media overlay and clicking insert, the focus is returned to the LP dialog and a resize occurs. The action buttons are no longer visible at this point and have been resized out of the focus.

If you can't reproduce this, please try to zoom in or try on a smaller screen size to cause the LP dialog to overflow the visible screen size.

Good luck everyone. This is getting super close!

  $(window).on('dialog:aftercreate', function (event, dialog, $dialog) {
    if ($dialog[0].id.indexOf('lpb-dialog-') === 0) {
      clearInterval(lpDialogInterval);
      lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500);
    }
  });

Shouldn't we be removing this whole block of code? If we remove the line lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500); isn't all the rest of the above code pointless?

Facing the same issue. #9 seems to fix it.

While I agree that removing the setInterval call here:

lpDialogInterval = setInterval(repositionDialog.bind(null, lpDialogInterval), 500);

will correct the stuttering behavior, it doesn't address the need to reposition the dialog when its height changes (see https://www.drupal.org/project/layout_paragraphs/issues/3252978 and https://stackoverflow.com/questions/5456298/refresh-jquery-ui-dialog-pos...).

We had some logic that used to test for whether the dialog height had changed but that logic was removed in commit b95cccc3.

In a moment I'll add a patch that only repositions when the height of the dialog has changed (while maintaining the logic that handles multiple dialogs).

Patch attached.

Updated my patch; revised patch attached.

#21 works much better than #9 for me - I can now scroll again

If you use a media library and this overlay opens, i.e. via the paragraph overlay (or replaces it), then it will not be re-aligned in size and you cannot scroll. I don't know if that plays a role here at the moment. For me the overlay is too big after adding the image.

#21 does stop the jumping back to the top on scroll, but it doesn't keep the modal within the viewport. So the issue with #21 is on long pages with the edit dialog open, one could lose where the dialog is open/visible if they scroll too far above or below it.

Found the problem for my particular issue. My issue was resolved by setting the configuration on /admin/config/content/layout_paragraphs/modal-settings. Specifically I set: width to 90%; height to auto; and checked the "Modal autoresize" option.

We are using #21 for a long time on few big customer websites and its working fine for us

Here's the patch attached of the current PR against the latest 2.0.x