Fix: Fix hiding on Android Chrome (#190)

src/lib/Controls.js

@@ -4,7 +4,8 @@ import { CLASS_HIDDEN } from './constants';
 
 const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls';
 const CONTROLS_BUTTON_CLASS = 'bp-controls-btn';
-const CONTROL_PAGE_NUM_WRAPPER_CLASS = 'bp-doc-page-num-wrapper';
+const CONTROLS_PAGE_NUM_INPUT_CLASS = 'bp-doc-page-num-input';
+const CONTROLS_PAGE_NUM_WRAPPER_CLASS = 'bp-doc-page-num-wrapper';
 const CONTROLS_AUTO_HIDE_TIMEOUT_IN_MILLIS = 1500;
 
 class Controls {
@@ -36,13 +37,6 @@ class Controls {
      */
     shouldHide = true;
 
-    /**
-     * Indicates if an element in the controls is focused
-     *
-     * @property {boolean}
-     */
-    isFocused = false;
-
     /**
      * Indicates if the browser supports touch events
      *
@@ -109,7 +103,7 @@ class Controls {
         return (
             !!element &&
             (element.classList.contains(CONTROLS_BUTTON_CLASS) ||
-                element.parentNode.classList.contains(CONTROL_PAGE_NUM_WRAPPER_CLASS))
+                element.parentNode.classList.contains(CONTROLS_PAGE_NUM_WRAPPER_CLASS))
         );
     }
 
@@ -122,7 +116,7 @@ class Controls {
         this.controlDisplayTimeoutId = setTimeout(() => {
             clearTimeout(this.controlDisplayTimeoutId);
 
-            if (!this.shouldHide) {
+            if (!this.shouldHide || this.isPageNumFocused()) {
                 this.resetTimeout();
             } else {
                 this.containerEl.classList.remove(SHOW_PREVIEW_CONTROLS_CLASS);
@@ -175,7 +169,6 @@ class Controls {
         // When we focus onto a preview control button, show controls
         if (this.isPreviewControlButton(event.target)) {
             this.containerEl.classList.add(SHOW_PREVIEW_CONTROLS_CLASS);
-            this.isFocused = true;
             this.shouldHide = false;
         }
     };
@@ -189,7 +182,6 @@ class Controls {
     focusoutHandler = (event) => {
         // When we focus out of a control button and aren't focusing onto another control button, hide the controls
         if (this.isPreviewControlButton(event.target) && !this.isPreviewControlButton(event.relatedTarget)) {
-            this.isFocused = false;
             this.shouldHide = true;
         }
     };
@@ -203,7 +195,7 @@ class Controls {
     clickHandler = (event) => {
         event.preventDefault();
         // If we are not focused in on the page num input, allow hiding after timeout
-        this.shouldHide = !this.isFocused;
+        this.shouldHide = true;
     };
 
     /**
@@ -259,6 +251,15 @@ class Controls {
     disable() {
         this.controlsEl.classList.add(CLASS_HIDDEN);
     }
+
+    /**
+     * Determines if the page number input is focused.
+     *
+     * @return {boolean} Is the input focused
+     */
+    isPageNumFocused() {
+        return document.activeElement.classList.contains(CONTROLS_PAGE_NUM_INPUT_CLASS);
+    }
 }
 
 export default Controls;

src/lib/__tests__/Controls-test.js

@@ -125,6 +125,18 @@ describe('lib/Controls', () => {
             expect(resetTimeoutStub).to.be.called;
         });
 
+        it('should call resetTimeout again if the page number input is focused', () => {
+            controls.shouldHide = true;
+            const isPageNumFocusedStub = sandbox.stub(controls, 'isPageNumFocused').returns(true);
+            controls.resetTimeout();
+
+            const resetTimeoutStub = sandbox.stub(controls, 'resetTimeout');
+            clock.tick(1501);
+
+            expect(isPageNumFocusedStub).to.be.called;
+            expect(resetTimeoutStub).to.be.called;
+        });
+
         it('should not remove the preview controls class if should hide is false', () => {
             controls.shouldHide = false;
             controls.containerEl.className = SHOW_PREVIEW_CONTROLS_CLASS;
@@ -175,14 +187,13 @@ describe('lib/Controls', () => {
     });
 
     describe('focusinHandler()', () => {
-        it('should add the controls class, block hiding, and set the controls to be focused if the element is a preview control button', () => {
+        it('should add the controls class, block hiding if the element is a preview control button', () => {
             const isControlButtonStub = sandbox.stub(controls, 'isPreviewControlButton').returns(true);
 
             controls.focusinHandler('event');
             expect(isControlButtonStub).to.be.called;
             expect(controls.containerEl.classList.contains(SHOW_PREVIEW_CONTROLS_CLASS)).to.be.true;
             expect(controls.shouldHide).to.be.false;
-            expect(controls.isFocused).to.be.true;
         });
 
         it('should not add the controls class if the element is not a preview control button', () => {
@@ -204,7 +215,6 @@ describe('lib/Controls', () => {
             controls.focusoutHandler('event');
             expect(isControlButtonStub).to.be.called;
             expect(controls.shouldHide).to.be.true;
-            expect(controls.isFocused).to.be.false;
         });
 
         it('should not remove the controls class if the element is not a preview control button and the related target is not', () => {
@@ -251,8 +261,7 @@ describe('lib/Controls', () => {
             expect(event.preventDefault).to.be.called;
         });
 
-        it('should stop block hiding if the controls are not focused', () => {
-            controls.isFocused = false;
+        it('should stop block hiding', () => {
             controls.clickHandler(event);
             expect(controls.shouldHide).to.be.true;
         });