fix: hide non-editable dashboard widget mode controls (#7967)

vaadin · Oct 11, 2024 · 17fe568 · 17fe568
1 parent 9fca8d0
commit 17fe568
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/packages/dashboard/src/keyboard-controller.js b/packages/dashboard/src/keyboard-controller.js
@@ -27,7 +27,7 @@ export class KeyboardController {
     const focusOutElement = e.composedPath()[0];
     const isHostVisible = !!this.host.offsetHeight;
     const isFocusButtonHidden = getComputedStyle(focusOutElement).display === 'none';
-    if (isHostVisible && isFocusButtonHidden) {
+    if (isHostVisible && isFocusButtonHidden && this.host.hasAttribute('editable')) {
       this.host.__focusApply();
     } else {
       this.host.__exitMode();

diff --git a/packages/dashboard/src/vaadin-dashboard-styles.js b/packages/dashboard/src/vaadin-dashboard-styles.js
@@ -33,7 +33,8 @@ export const dashboardWidgetAndSectionStyles = css`
   :host(:not([editable])) #drag-handle,
   :host(:not([editable])) #remove-button,
   :host(:not([editable])) #focus-button,
-  :host(:not([editable])) #focus-button-wrapper {
+  :host(:not([editable])) #focus-button-wrapper,
+  :host(:not([editable])) .mode-controls {
     display: none;
   }
 

diff --git a/packages/dashboard/test/dashboard-keyboard.test.ts b/packages/dashboard/test/dashboard-keyboard.test.ts
@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { fixtureSync, isChrome, nextFrame } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import '../vaadin-dashboard.js';
@@ -451,6 +451,19 @@ describe('dashboard - keyboard interaction', () => {
     expect(widget.hasAttribute('move-mode')).to.be.true;
   });
 
+  // These tests don't work on Firefox / Safari even though the functionality they test works
+  (isChrome ? it : it.skip)('should blur the focused widget when dashboard becomes non-editable', async () => {
+    const widget = getElementFromCell(dashboard, 0, 0)!;
+    await sendKeys({ press: 'Tab' });
+    await nextFrame();
+    expect(widget.contains(document.activeElement)).to.be.true;
+    expect(widget.hasAttribute('focused')).to.be.true;
+    dashboard.editable = false;
+    await nextFrame();
+    expect(widget.contains(document.activeElement)).to.be.false;
+    expect(widget.hasAttribute('focused')).to.be.false;
+  });
+
   it('should enter move mode without selecting first', async () => {
     const widget = getElementFromCell(dashboard, 0, 0)!;
     (getDraggable(widget) as HTMLElement).click();
@@ -658,6 +671,18 @@ describe('dashboard - keyboard interaction', () => {
 
       expect(dashboard.items).to.eql([{ id: 0 }, { items: [{ id: 2 }, { id: 3 }] }, { id: 1 }]);
     });
+
+    (isChrome ? it : it.skip)('should blur the widget when dashboard becomes non-editable', async () => {
+      const widget = getElementFromCell(dashboard, 0, 0)!;
+      expect(widget.contains(document.activeElement)).to.be.true;
+      expect(widget.hasAttribute('selected')).to.be.true;
+      expect(widget.hasAttribute('focused')).to.be.true;
+      dashboard.editable = false;
+      await nextFrame();
+      expect(widget.contains(document.activeElement)).to.be.false;
+      expect(widget.hasAttribute('selected')).to.be.false;
+      expect(widget.hasAttribute('focused')).to.be.false;
+    });
   });
 
   it('should enter resize mode', async () => {