fix: hide crud editor focus ring from pointer events (#7339) (#7340)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
vaadin · Apr 16, 2024 · cc012a0 · cc012a0
1 parent 778749a
commit cc012a0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git 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
@@ -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
@@ -83,6 +83,7 @@ registerStyles(
         inset: 0;
         content: '';
         box-shadow: inset 0 0 0 2px var(--material-primary-color);
+        pointer-events: none;
       }
 
       [part='toolbar'] {