From 9c240b06c582378f6b839414925d0b16734e16f7 Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Thu, 15 Nov 2018 12:51:00 -0800 Subject: [PATCH 1/3] Fix: Focus on correct element when entering fullscreen in Firefox --- src/lib/Fullscreen.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js index 769f7aac6..e30ea0b53 100644 --- a/src/lib/Fullscreen.js +++ b/src/lib/Fullscreen.js @@ -111,15 +111,22 @@ class Fullscreen extends EventEmitter { * Focuses the element * * @private - * @param {HTMLElement|Event} el - Fullscreen element or event + * @param {HTMLElement|Event} elementOrEvent - Fullscreen element or event * @return {void} */ - focusFullscreenElement = (el) => { + focusFullscreenElement = (elementOrEvent) => { // Focus on the fullscreen element so keyboard // events are triggered without an extra click // If el has target property, then it is an Event // otherwise it is a HTMLElement - const element = el.target || el; + let element; + if (elementOrEvent.target) { + // This is an element + // On certain browsers (Firefox), the actual target is on the activeElement property of the event target + element = elementOrEvent.target.activeElement || elementOrEvent.target; + } else { + element = elementOrEvent; + } element.focus(); }; From d500cbd04a6f50a3b38b1f626628051e928012ba Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Thu, 15 Nov 2018 13:33:47 -0800 Subject: [PATCH 2/3] Chore: Switching to fscreen.fullscreenElement to focus --- src/lib/Fullscreen.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js index e30ea0b53..4e44da36a 100644 --- a/src/lib/Fullscreen.js +++ b/src/lib/Fullscreen.js @@ -111,24 +111,14 @@ class Fullscreen extends EventEmitter { * Focuses the element * * @private - * @param {HTMLElement|Event} elementOrEvent - Fullscreen element or event * @return {void} */ - focusFullscreenElement = (elementOrEvent) => { + focusFullscreenElement = () => { // Focus on the fullscreen element so keyboard // events are triggered without an extra click // If el has target property, then it is an Event // otherwise it is a HTMLElement - let element; - if (elementOrEvent.target) { - // This is an element - // On certain browsers (Firefox), the actual target is on the activeElement property of the event target - element = elementOrEvent.target.activeElement || elementOrEvent.target; - } else { - element = elementOrEvent; - } - - element.focus(); + fscreen.fullscreenElement.focus(); }; /** From 7a501ce5ef6d976ac59448a39af2335acf5d9e65 Mon Sep 17 00:00:00 2001 From: Jeremy Press Date: Thu, 15 Nov 2018 16:48:10 -0800 Subject: [PATCH 3/3] Chore: Fixing unit tests --- src/lib/Fullscreen.js | 4 +-- src/lib/__tests__/Fullscreen-test.js | 38 +++++++++------------------- 2 files changed, 13 insertions(+), 29 deletions(-) diff --git a/src/lib/Fullscreen.js b/src/lib/Fullscreen.js index 4e44da36a..ae4a2c540 100644 --- a/src/lib/Fullscreen.js +++ b/src/lib/Fullscreen.js @@ -100,7 +100,7 @@ class Fullscreen extends EventEmitter { enter = (this.isSupported() && this.isFullscreen()) || (!this.isSupported() && !this.isFullscreen(el)); if (enter) { - this.focusFullscreenElement(el); + this.focusFullscreenElement(); this.emit('enter'); } else { this.emit('exit'); @@ -116,8 +116,6 @@ class Fullscreen extends EventEmitter { focusFullscreenElement = () => { // Focus on the fullscreen element so keyboard // events are triggered without an extra click - // If el has target property, then it is an Event - // otherwise it is a HTMLElement fscreen.fullscreenElement.focus(); }; diff --git a/src/lib/__tests__/Fullscreen-test.js b/src/lib/__tests__/Fullscreen-test.js index 7bf992981..0b8755293 100644 --- a/src/lib/__tests__/Fullscreen-test.js +++ b/src/lib/__tests__/Fullscreen-test.js @@ -1,4 +1,5 @@ /* eslint-disable no-unused-expressions */ +import fscreen from 'fscreen'; import fullscreen from '../Fullscreen'; import { CLASS_FULLSCREEN } from '../constants'; @@ -9,6 +10,14 @@ describe('lib/Fullscreen', () => { sandbox.verifyAndRestore(); }); + const fullscreenEl = document.createElement('div'); + beforeEach(() => { + Object.defineProperty(fscreen, 'fullscreenElement', { + value: fullscreenEl, + writable: true + }); + }); + describe('isFullscreen()', () => { it('should return whether document is in fullscreen if true fullscreen is supported', () => { sandbox.stub(fullscreen, 'isSupported').returns(true); @@ -94,16 +103,6 @@ describe('lib/Fullscreen', () => { expect(fullscreen.emit).to.have.been.calledWith('exit'); }); - - it('should be called only once when the fullscreenchange event is emitted', () => { - const spy = sandbox.spy(fullscreen, 'fullscreenchangeHandler'); - sandbox.stub(fullscreen, 'focusFullscreenElement').returns(true); - // rebind the dom listeners to use the spy - fullscreen.bindDOMListeners(); - const event = new Event('webkitfullscreenchange', { bubbles: true }); - document.getElementById('test-container').dispatchEvent(event); - expect(spy).to.be.called.once; - }); }); describe('toggle()', () => { @@ -231,23 +230,10 @@ describe('lib/Fullscreen', () => { }); describe('focusFullscreenElement()', () => { - it('should focus the element when element passed in', () => { - const element = document.createElement('div'); - sandbox.stub(element, 'focus'); - - fullscreen.focusFullscreenElement(element); - - expect(element.focus.called).to.be.true; - }); - it('should focus the element when event is passed in', () => { - const element = document.createElement('div'); - sandbox.stub(element, 'focus'); - const event = { target: element }; - - fullscreen.focusFullscreenElement(event); - - expect(element.focus.called).to.be.true; + sandbox.stub(fullscreenEl, 'focus'); + fullscreen.focusFullscreenElement(); + expect(fullscreenEl.focus.called).to.be.true; }); }); });