Dialog no longer resizes automatically after dragging.

[Frettman]

First of all, I'm using the Java API in case that makes a difference.

I have a dialog with a details area that I can show and hide (using setVisible of Component/Element). Usually the dialog resizes (and recenters) accordingly on its own. But after dragging the dialog the size seems to be fixed and a scrollbar appears instead of increasing the dialog's size.

[web-padawan]

The issue appears to be caused by setting width and height on the overlay part when dragging starts:

web-components/packages/dialog/src/vaadin-dialog-draggable-mixin.js

Lines 95 to 97 in 8569a89

	if (this.$.overlay.$.overlay.style.position !== 'absolute') {
	this.$.overlay.setBounds(this._originalBounds);
	}

Note: the same logic is also executed when resizing starts:

web-components/packages/dialog/src/vaadin-dialog-resizable-mixin.js

Lines 179 to 181 in 8569a89

	if (this.$.overlay.$.overlay.style.position !== 'absolute') {
	this.$.overlay.setBounds(this._originalBounds);
	}

[web-padawan]

As a workaround, it's possible to use this to ensure the above code never runs:

dialog.$.overlay.$.overlay.style.position = 'absolute';

However, if header or footer is provided, dragging either of them will also resize dialog in this case 🙈

[sissbruecker]

Not locking in the width when starting dragging can have some interesting side effects if the dialog has a max width:

Bildschirmaufnahme.2022-10-14.um.18.55.53.mp4

That seems to be because the max-width is applied on the parent element of the element that is actually being dragged, which also adds a margin that the dragged element tries to respect.

[jouni]

Would it be possible to fix the size only for the duration of the drag?

[yuriy-fix]

For extra details please check vaadin/flow-components#4083 as well