From cc012a07b5ed40e05179a1adbd7295885498d48b Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Tue, 16 Apr 2024 12:14:31 +0200
Subject: [PATCH] fix: hide crud editor focus ring from pointer events (#7339)
 (#7340)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
---
 packages/crud/test/crud-editor.test.js        | 28 ++++++++++++++++++-
 .../crud/theme/lumo/vaadin-crud-styles.js     |  1 +
 .../crud/theme/material/vaadin-crud-styles.js |  1 +
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/crud/test/crud-editor.test.js b/packages/crud/test/crud-editor.test.js
index 051252d47d..0d201f6548 100644
--- a/packages/crud/test/crud-editor.test.js
+++ b/packages/crud/test/crud-editor.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { aTimeout, fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { setViewport } from '@web/test-runner-commands';
 import '../vaadin-crud.js';
 import { flushGrid } from './helpers.js';
@@ -11,6 +11,16 @@ describe('crud editor', () => {
     await setViewport({ width: 1024, height: 768 });
   });
 
+  afterEach(async () => {
+    // Wait until the crud dialog overlay is closed
+    let overlay;
+    while ((overlay = document.querySelector('body > vaadin-crud-dialog-overlay'))) {
+      // Press esc to close the dialog
+      overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+      await aTimeout(1);
+    }
+  });
+
   describe('header', () => {
     let header;
 
@@ -122,6 +132,22 @@ describe('crud editor', () => {
         expect(form.parentElement).to.be.null;
         expect(newForm.parentElement).to.equal(overlay);
       });
+
+      it('should not cover the editor content with focus ring element', async () => {
+        // Open the editor
+        crud.editorPosition = 'aside';
+        crud._newButton.click();
+        await nextRender();
+
+        // Get the elementFromPoint of the editor header
+        const header = crud.querySelector('[slot=header]');
+        const headerRect = header.getBoundingClientRect();
+        const x = headerRect.left + headerRect.width / 2;
+        const y = headerRect.top + headerRect.height / 2;
+        const elementFromPoint = document.elementFromPoint(x, y);
+
+        expect(elementFromPoint).to.equal(header);
+      });
     });
   });
 });
diff --git a/packages/crud/theme/lumo/vaadin-crud-styles.js b/packages/crud/theme/lumo/vaadin-crud-styles.js
index 4c87ca3615..1f1296d995 100644
--- a/packages/crud/theme/lumo/vaadin-crud-styles.js
+++ b/packages/crud/theme/lumo/vaadin-crud-styles.js
@@ -108,6 +108,7 @@ registerStyles(
         inset: 0;
         content: '';
         box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
+        pointer-events: none;
       }
 
       :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
diff --git a/packages/crud/theme/material/vaadin-crud-styles.js b/packages/crud/theme/material/vaadin-crud-styles.js
index 07d7a7fd84..62d8f6766a 100644
--- a/packages/crud/theme/material/vaadin-crud-styles.js
+++ b/packages/crud/theme/material/vaadin-crud-styles.js
@@ -83,6 +83,7 @@ registerStyles(
         inset: 0;
         content: '';
         box-shadow: inset 0 0 0 2px var(--material-primary-color);
+        pointer-events: none;
       }
 
       [part='toolbar'] {