fix: update fullscreen on esc key

Author: mtsvyatkova

src/components/common/utils.spec.ts

@@ -285,7 +285,7 @@ export function simulateDrop(node: Element) {
 
 export function simulateDoubleClick(node: Element) {
   node.dispatchEvent(
-    new MouseEvent('dblclick', { bubbles: true, composed: true })
+    new PointerEvent('dblclick', { bubbles: true, composed: true })
   );
 }
 

src/components/tile-manager/tile-manager.spec.ts

@@ -1,9 +1,9 @@
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import { range } from 'lit/directives/range.js';
-import { spy } from 'sinon';
+import { match, restore, spy, stub } from 'sinon';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first } from '../common/util.js';
-import { simulateDoubleClick } from '../common/utils.spec.js';
+import { simulateClick, simulateDoubleClick } from '../common/utils.spec.js';
 import IgcTileHeaderComponent from './tile-header.js';
 import IgcTileManagerComponent from './tile-manager.js';
 import IgcTileComponent from './tile.js';
@@ -27,9 +27,9 @@ describe('Tile Manager component', () => {
     return Array.from(tileManager.querySelectorAll('igc-tile'));
   }
 
-  function getTileBaseWrapper(element: IgcTileComponent) {
-    return element.renderRoot.querySelector<HTMLDivElement>('[part~="base"]')!;
-  }
+  // function getTileBaseWrapper(element: IgcTileComponent) {
+  //   return element.renderRoot.querySelector<HTMLDivElement>('[part~="base"]')!;
+  // }
 
   function createTileManager() {
     const result = Array.from(range(5)).map(
@@ -86,10 +86,10 @@ describe('Tile Manager component', () => {
     // TODO: Add an initialization test with non-defined column count and minimum dimension constraints
     it('is correctly initialized with its default component state', () => {
       // TODO: Add checks for other settings when implemented
-      expect(tileManager.columnCount).to.equal(10);
+      expect(tileManager.columnCount).to.equal(0);
       expect(tileManager.dragMode).to.equal('slide');
-      expect(tileManager.minColumnWidth).to.equal('150px');
-      expect(tileManager.minRowHeight).to.equal('200px');
+      expect(tileManager.minColumnWidth).to.equal(undefined);
+      expect(tileManager.minRowHeight).to.equal(undefined);
       expect(tileManager.tiles).lengthOf(2);
     });
 
@@ -122,7 +122,7 @@ describe('Tile Manager component', () => {
       expect(tileManager).shadowDom.to.equal(
         `<div
           part="base"
-          style="--ig-column-count:10;--ig-min-col-width:150px;--ig-min-row-height:200px;"
+          style=""
         >
           <slot></slot>
         </div>`
@@ -293,45 +293,117 @@ describe('Tile Manager component', () => {
   });
 
   describe('Tile state change behavior', () => {
+    let tile: any;
+
     beforeEach(async () => {
       tileManager = await fixture<IgcTileManagerComponent>(createTileManager());
+      tile = first(tileManager.tiles);
+
+      // Mock `requestFullscreen`
+      tile.requestFullscreen = stub().callsFake(() => {
+        Object.defineProperty(document, 'fullscreenElement', {
+          value: tile,
+          configurable: true,
+        });
+        return Promise.resolve();
+      });
+
+      // Mock `exitFullscreen`
+      Object.defineProperty(document, 'exitFullscreen', {
+        value: stub().callsFake(() => {
+          Object.defineProperty(document, 'fullscreenElement', {
+            value: null,
+            configurable: true,
+          });
+          return Promise.resolve();
+        }),
+        configurable: true,
+      });
     });
 
-    // TODO Mockup browser requestFullscreen/exitFullscreen
-    xit('should correctly fire `igcTileFullscreen` event', async () => {
-      const tile = first(tileManager.tiles);
-      const tileWrapper = getTileBaseWrapper(tile);
+    afterEach(() => {
+      Object.defineProperty(document, 'fullscreenElement', {
+        value: null,
+        configurable: true,
+      });
+
+      restore();
+    });
+
+    it('should correctly change fullscreen state on double click', async () => {
+      simulateDoubleClick(tile);
+      await elementUpdated(tileManager);
+
+      expect(tile.requestFullscreen).to.have.been.calledOnce;
+      expect(document.exitFullscreen).to.not.have.been.called;
+      expect(tile.fullscreen).to.be.true;
+
+      simulateDoubleClick(tile);
+      await elementUpdated(tileManager);
+
+      expect(document.exitFullscreen).to.have.been.calledOnce;
+      expect(tile.fullscreen).to.be.false;
+    });
 
+    it('should correctly fire `igcTileFullscreen` event', async () => {
+      const tile = first(tileManager.tiles);
+      const tileHeader = tile.querySelector('igc-tile-header');
+      const fullscreenButton =
+        tileHeader?.renderRoot.querySelectorAll('igc-icon-button')[1];
       const eventSpy = spy(tile, 'emitEvent');
 
-      simulateDoubleClick(tileWrapper);
-      await elementUpdated(tile);
+      simulateClick(fullscreenButton!);
+      await elementUpdated(tileManager);
 
       expect(eventSpy).calledWith('igcTileFullscreen', {
         detail: { tile: tile, state: true },
         cancelable: true,
       });
+      expect(tile.fullscreen).to.be.true;
+
+      simulateClick(fullscreenButton!);
+      await elementUpdated(tileManager);
 
-      // check if tile is fullscreen
+      expect(eventSpy).calledWith('igcTileFullscreen', {
+        detail: { tile: tile, state: false },
+        cancelable: true,
+      });
+      expect(tile.fullscreen).to.be.false;
     });
 
-    // TODO Mockup browser requestFullscreen/exitFullscreen
-    xit('can cancel `igcTileFullscreen` event', async () => {
-      const tile = first(tileManager.tiles);
+    it('can cancel `igcTileFullscreen` event', async () => {
       const eventSpy = spy(tile, 'emitEvent');
 
-      tile.addEventListener('igcTileFullscreen', (ev) => {
+      tile.addEventListener('igcTileFullscreen', (ev: CustomEvent) => {
         ev.preventDefault();
       });
 
       simulateDoubleClick(tile);
       await elementUpdated(tileManager);
 
-      expect(eventSpy).calledWith('igcTileFullscreen', {
-        detail: { tile: tile, state: false },
-        cancelable: true,
+      expect(eventSpy).to.have.been.calledWith(
+        'igcTileFullscreen',
+        match({
+          detail: { tile: tile, state: true },
+          cancelable: true,
+        })
+      );
+      expect(tile.fullscreen).to.be.false;
+      expect(tile.requestFullscreen).not.to.have.been.called;
+    });
+
+    it('should update fullscreen property on fullscreenchange (e.g. Esc key is pressed)', async () => {
+      tile.fullscreen = true;
+
+      // Mock the browser removing fullscreen element and firing a fullscreenchange event
+      Object.defineProperty(document, 'fullscreenElement', {
+        configurable: true,
+        value: null,
       });
-      // check if tile is not fullscreen
+      tile.dispatchEvent(new Event('fullscreenchange'));
+      await elementUpdated(tileManager);
+
+      expect(tile.fullscreen).to.be.false;
     });
 
     //TODO Fix test by selecting header icon and simulate click on it

src/components/tile-manager/tile.ts

@@ -72,6 +72,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _position = -1;
   private _disableDrag = false;
   private _fullscreen = false;
+  private _isUserTriggered = false;
   private _maximized = false;
   private _initialPointerX: number | null = null;
   private _initialPointerY: number | null = null;
@@ -162,8 +163,21 @@ export default class IgcTileComponent extends EventEmitterMixin<
     if (this._fullscreen === value) return;
 
     this._fullscreen = value;
+
+    if (this._isUserTriggered && !this.emitFullScreenEvent()) {
+      this._isUserTriggered = false;
+      this._fullscreen = !value; // Rollback state if event is canceled
+      return;
+    }
+
+    if (this._fullscreen) {
+      this.requestFullscreen();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+
+    this._isUserTriggered = false;
     this._context.setValue(this, true);
-    this.handleFullscreenRequest();
   }
 
   public get fullscreen() {
@@ -235,7 +249,8 @@ export default class IgcTileComponent extends EventEmitterMixin<
     // Will probably expose that as a dynamic binding based on a property
     // and as a response to some UI element interaction
     // REVIEW: fullscreen property and a tile header action button added
-    this.addEventListener('dblclick', this.handleDoubleClick);
+    this.addEventListener('dblclick', this.toggleFullscreen);
+    this.addEventListener('fullscreenchange', this.handleFullscreenChange);
   }
 
   public override connectedCallback() {
@@ -248,8 +263,17 @@ export default class IgcTileComponent extends EventEmitterMixin<
   }
 
   public toggleFullscreen() {
+    this._isUserTriggered = true;
     this.fullscreen = !this.fullscreen;
-    this.emitFullScreenEvent();
+  }
+
+  private handleFullscreenChange() {
+    const isFullscreen = document.fullscreenElement === this;
+    if (!isFullscreen && this._fullscreen) {
+      // If exited fullscreen (e.g., via ESC key), update state
+      this._isUserTriggered = true;
+      this.fullscreen = false;
+    }
   }
 
   // protected override async firstUpdated() {
@@ -264,26 +288,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
     });
   }
 
-  private handleDoubleClick() {
-    if (!this.emitFullScreenEvent()) {
-      return;
-    }
-
-    this.fullscreen = !this.fullscreen;
-  }
-
-  private async handleFullscreenRequest() {
-    try {
-      if (this.fullscreen) {
-        await this.requestFullscreen();
-      } else {
-        await document.exitFullscreen();
-      }
-    } catch {
-      document.exitFullscreen();
-    }
-  }
-
   private handleDragStart(e: DragEvent) {
     const event = new CustomEvent('tileDragStart', {
       detail: { tile: this },

stories/tile-manager.stories.ts

@@ -362,6 +362,9 @@ export const FinDashboard: Story = {
     <igc-button @click=${disableTileResize}>
       Toggle Tile 2 Resizing
     </igc-button>
+    <igc-button @click=${toggleFullscreen}>
+      Toggle Tile 1 Fullscreen prop
+    </igc-button>
   `,
 };
 
@@ -612,6 +615,12 @@ function disableTileResize() {
   tileManager.tiles[1].disableResize = !tileManager.tiles[1].disableResize;
 }
 
+function toggleFullscreen() {
+  const tileManager =
+    document.querySelector<IgcTileManagerComponent>('igc-tile-manager')!;
+  tileManager.tiles[1].fullscreen = !tileManager.tiles[1].fullscreen;
+}
+
 function cancelStateChangeEvent(e: CustomEvent) {
   e.preventDefault();
 }