diff --git a/packages/dashboard/src/widget-resize-controller.js b/packages/dashboard/src/widget-resize-controller.js index dadec05b5d..8812e9c877 100644 --- a/packages/dashboard/src/widget-resize-controller.js +++ b/packages/dashboard/src/widget-resize-controller.js @@ -106,13 +106,18 @@ export class WidgetResizeController extends EventTarget { itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-width'); itemWrapper.style.removeProperty('--_vaadin-dashboard-widget-resizer-height'); - this.resizedItem = null; this.host.$.grid.toggleAttribute('resizing', false); this.__resizedElementRemoveObserver.disconnect(); this.cleanup(); - this.host.dispatchEvent(new CustomEvent('dashboard-item-resize-end')); + this.host.dispatchEvent( + new CustomEvent('dashboard-item-resize-end', { + detail: { item: this.resizedItem }, + cancelable: true, + }), + ); + this.resizedItem = null; } /** @private */ diff --git a/packages/dashboard/test/dashboard-widget-resizing.test.ts b/packages/dashboard/test/dashboard-widget-resizing.test.ts index a5e79f8bee..d2e448d718 100644 --- a/packages/dashboard/test/dashboard-widget-resizing.test.ts +++ b/packages/dashboard/test/dashboard-widget-resizing.test.ts @@ -272,10 +272,15 @@ describe('dashboard - widget resizing', () => { dashboard.addEventListener('dashboard-item-resize-end', resizeEndSpy); fireResizeStart(getElementFromCell(dashboard, 0, 0)!); await nextFrame(); + fireResizeOver(getElementFromCell(dashboard, 0, 1)!, 'end'); + await nextFrame(); fireResizeEnd(dashboard); await nextFrame(); expect(resizeEndSpy).to.have.been.calledOnce; + expect(resizeEndSpy.getCall(0).args[0].detail).to.deep.equal({ + item: { id: 0, colspan: 2, rowspan: 1 }, + }); }); it('should cancel touchmove events while resizing', async () => { @@ -298,6 +303,19 @@ describe('dashboard - widget resizing', () => { expect(touchmove.defaultPrevented).to.be.false; }); + it('should prevent selection while resizing', async () => { + expect(getComputedStyle(getElementFromCell(dashboard, 0, 0)!).userSelect).not.to.equal('none'); + fireResizeStart(getElementFromCell(dashboard, 0, 0)!); + await nextFrame(); + + expect(getComputedStyle(getElementFromCell(dashboard, 0, 0)!).userSelect).to.equal('none'); + + fireResizeEnd(dashboard); + await nextFrame(); + + expect(getComputedStyle(getElementFromCell(dashboard, 0, 0)!).userSelect).not.to.equal('none'); + }); + // Make sure the original resized element is restored in the host. // Otherwise, "track" event would stop working. describe('ensure track event', () => {