Fix: Focus on correct element when entering fullscreen in Firefox (#864)

box · Nov 20, 2018 · 75f70c2 · 75f70c2
1 parent a362a83
commit 75f70c2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 34 deletions.
diff --git 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');
@@ -111,17 +111,12 @@ class Fullscreen extends EventEmitter {
      * Focuses the element
      *
      * @private
-     * @param {HTMLElement|Event} el - Fullscreen element or event
      * @return {void}
      */
-    focusFullscreenElement = (el) => {
+    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
-        const element = el.target || el;
-
-        element.focus();
+        fscreen.fullscreenElement.focus();
     };
 
     /**

diff --git 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;
         });
     });
 });