fix: listen to opened-changed events in custom editors (#9671)

Author: DiegoCardoso

packages/grid-pro/src/vaadin-grid-pro-edit-column-mixin.js

@@ -8,6 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
+import { getDeepActiveElement } from '@vaadin/a11y-base/src/focus-utils.js';
 import { get, set } from '@vaadin/component-base/src/path-utils.js';
 
 /**
@@ -290,6 +291,16 @@ export const GridProEditColumnMixin = (superClass) =>
       } else {
         this._focusEditor(editor);
       }
+
+      if (this.editorType === 'custom') {
+        editor.addEventListener('opened-changed', (event) => {
+          const element = event.target;
+          const activeElement = getDeepActiveElement();
+          if (!element.opened && !element.contains(activeElement)) {
+            this._grid._stopEdit();
+          }
+        });
+      }
     }
 
     /**

test/integration/grid-pro-custom-editor.test.js

@@ -1,6 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
-import { resetMouse, sendKeys, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
-import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { resetMouse, sendKeys, sendMouse, sendMouseToElement, setViewport } from '@vaadin/test-runner-commands';
+import { click, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import '@vaadin/combo-box/src/vaadin-combo-box.js';
 import '@vaadin/custom-field/src/vaadin-custom-field.js';
 import '@vaadin/date-picker/src/vaadin-date-picker.js';
@@ -9,13 +9,13 @@ import '@vaadin/grid-pro/src/vaadin-grid-pro.js';
 import '@vaadin/grid-pro/src/vaadin-grid-pro-edit-column.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/time-picker/src/vaadin-time-picker.js';
-import { untilOverlayRendered } from '@vaadin/date-picker/test/helpers.js';
-import { flushGrid, getContainerCell } from '@vaadin/grid-pro/test/helpers.js';
+import { untilOverlayRendered, untilOverlayScrolled } from '@vaadin/date-picker/test/helpers.js';
+import { dblclick, flushGrid, getContainerCell } from '@vaadin/grid-pro/test/helpers.js';
 
 describe('grid-pro custom editor', () => {
   let grid, cell;
 
-  function createGrid(path) {
+  function createGrid(path, autoOpen = false) {
     grid = fixtureSync(`
       <vaadin-grid-pro>
         <vaadin-grid-pro-edit-column path="${path}" editor-type="custom"></vaadin-grid-pro-edit-column>
@@ -37,7 +37,7 @@ describe('grid-pro custom editor', () => {
       case 'date':
         column.editModeRenderer = (root, _, model) => {
           root.innerHTML = `
-            <vaadin-date-picker value="${model.item.date}" auto-open-disabled></vaadin-date-picker>
+            <vaadin-date-picker value="${model.item.date}" ${!autoOpen ? 'auto-open-disabled' : ''}></vaadin-date-picker>
           `;
         };
         break;
@@ -174,6 +174,63 @@ describe('grid-pro custom editor', () => {
       expect(editor).to.be.ok;
       expect(editor.value).to.equal('1984-01-12');
     });
+
+    describe('mobile', () => {
+      let width, height;
+
+      before(() => {
+        width = window.innerWidth;
+        height = window.innerHeight;
+      });
+
+      beforeEach(async () => {
+        await setViewport({ width: 420, height: 1020 });
+        grid = createGrid('date', true);
+        await nextRender();
+        cell = getContainerCell(grid.$.items, 0, 0);
+        await sendMouse({ type: 'click', position: [10, 10] });
+      });
+
+      after(async () => {
+        await setViewport({ width, height });
+      });
+
+      it('should open date picker on double click', async () => {
+        dblclick(cell);
+        const datePicker = cell._content.querySelector('vaadin-date-picker');
+        expect(datePicker).to.be.ok;
+        await untilOverlayRendered(datePicker);
+        expect(datePicker.opened).to.be.ok;
+      });
+
+      it('should close date picker on selecting a date in the overlay', async () => {
+        dblclick(cell);
+        const datePicker = cell._content.querySelector('vaadin-date-picker');
+        await untilOverlayRendered(datePicker);
+
+        const todayButton = datePicker._overlayElement.querySelector('[slot=today-button]');
+        click(todayButton); // Fist click to scroll to current month
+        await untilOverlayScrolled(datePicker);
+        click(todayButton); // Second click to select today's date
+
+        await nextRender();
+        const TODAY_DATE = new Date().toISOString().split('T')[0];
+        expect(TODAY_DATE).to.be.equal(cell._content.textContent);
+      });
+
+      it('should restore previous cell content if overlay is closed', async () => {
+        const previousContent = cell._content.textContent;
+
+        dblclick(cell);
+        const datePicker = cell._content.querySelector('vaadin-date-picker');
+        await untilOverlayRendered(datePicker);
+
+        sendMouse({ type: 'click', position: [10, 10] });
+        await nextRender();
+        expect(cell._content.querySelector('vaadin-date-picker')).to.not.be.ok;
+        expect(previousContent).to.be.equal(cell._content.textContent);
+      });
+    });
   });
 
   describe('combo-box', () => {