fix(events): prevent hidden pane to be visible on keyboard (#112)

dist/cupertino-pane.esm.js

@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: November 11, 2021
+ * Released on: November 12, 2021
  */
 
 /*! *****************************************************************************
@@ -249,11 +249,6 @@ class Events {
          * @param e
          */
         this.onKeyboardWillHideCb = (e) => this.onKeyboardWillHide(e);
-        /**
-         * Close Cordova Keyboard event
-         * @param e
-         */
-        this.onKeyboardDidHideCb = (e) => this.onKeyboardDidHide(e);
         /**
          * Window resize event
          * TODO: Prevent android unlock events
@@ -280,7 +275,6 @@ class Events {
         if (this.settings.handleKeyboard && this.device.cordova) {
             window.addEventListener('keyboardWillShow', this.onKeyboardShowCb);
             window.addEventListener('keyboardWillHide', this.onKeyboardWillHideCb);
-            window.addEventListener('keyboardDidHide', this.onKeyboardDidHideCb);
         }
         // Fix Android issue with resize if not handle
         if (!this.settings.handleKeyboard
@@ -318,7 +312,6 @@ class Events {
         if (this.settings.handleKeyboard && this.device.cordova) {
             window.removeEventListener('keyboardWillShow', this.onKeyboardShowCb);
             window.removeEventListener('keyboardWillHide', this.onKeyboardWillHideCb);
-            window.removeEventListener('keyboardDidHide', this.onKeyboardDidHideCb);
         }
         // Orientation change + window resize
         window.removeEventListener('resize', this.onWindowResizeCb);
@@ -598,7 +591,6 @@ class Events {
         if (this.device.android) {
             setTimeout(() => this.fixAndroidResize(), 20);
         }
-        this.keyboardVisible = true;
         this.breakpoints.prevBreakpoint = Object.entries(this.breakpoints.breaks).find(val => val[1] === this.instance.getPanelTransformY())[0];
         let newHeight = this.settings.breaks[this.instance.currentBreak()].height + e.keyboardHeight;
         // Landscape case
@@ -616,10 +608,6 @@ class Events {
         }
     }
     onKeyboardWillHide(e) {
-        // Move back
-        if (!this.keyboardVisible) {
-            return;
-        }
         // pane not visible on viewport
         if (!this.isOnViewport()) {
             return;
@@ -635,13 +623,11 @@ class Events {
             this.instance.moveToBreak(this.breakpoints.prevBreakpoint);
         }
     }
-    onKeyboardDidHide(e) {
-        this.keyboardVisible = false;
-    }
     onWindowResize(e) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Doesn't re-build if callback from keyboard
-            if (this.keyboardVisible) {
+            // If form element active - recognize here as Keyboard event
+            // TODO: if window screen not changed condition also (desktop input focus + resize)
+            if (this.isFormElement(document.activeElement)) {
                 return;
             }
             yield new Promise((resolve) => setTimeout(() => resolve(true), 150));

dist/types/events.d.ts

@@ -75,12 +75,6 @@ export declare class Events {
      */
     onKeyboardWillHideCb: (e: any) => void;
     private onKeyboardWillHide;
-    /**
-     * Close Cordova Keyboard event
-     * @param e
-     */
-    onKeyboardDidHideCb: (e: any) => void;
-    private onKeyboardDidHide;
     /**
      * Window resize event
      * TODO: Prevent android unlock events

src/events.ts

@@ -48,7 +48,6 @@ export class Events {
     if (this.settings.handleKeyboard && this.device.cordova) {
       window.addEventListener('keyboardWillShow', this.onKeyboardShowCb);
       window.addEventListener('keyboardWillHide', this.onKeyboardWillHideCb);
-      window.addEventListener('keyboardDidHide', this.onKeyboardDidHideCb);
     }
 
     // Fix Android issue with resize if not handle
@@ -89,7 +88,6 @@ export class Events {
     if (this.settings.handleKeyboard && this.device.cordova) {
       window.removeEventListener('keyboardWillShow', this.onKeyboardShowCb);
       window.removeEventListener('keyboardWillHide', this.onKeyboardWillHideCb);
-      window.removeEventListener('keyboardDidHide', this.onKeyboardDidHideCb);
     }
 
     // Orientation change + window resize
@@ -474,7 +472,6 @@ export class Events {
       setTimeout(() => this.fixAndroidResize(), 20);
     }
 
-    this.keyboardVisible = true;
     this.breakpoints.prevBreakpoint = Object.entries(this.breakpoints.breaks).find(val => val[1] === this.instance.getPanelTransformY())[0];
     let newHeight = this.settings.breaks[this.instance.currentBreak()].height + e.keyboardHeight;
 
@@ -501,11 +498,6 @@ export class Events {
    */
   public onKeyboardWillHideCb = (e) => this.onKeyboardWillHide(e);
   private onKeyboardWillHide(e) {
-    // Move back
-    if (!this.keyboardVisible) {
-      return;
-    }
-
     // pane not visible on viewport
     if (!this.isOnViewport()) {
       return;
@@ -525,24 +517,16 @@ export class Events {
     }
   }
 
-  /**
-   * Close Cordova Keyboard event
-   * @param e
-   */
-  public onKeyboardDidHideCb = (e) => this.onKeyboardDidHide(e);
-  private onKeyboardDidHide(e) {
-    this.keyboardVisible = false;
-  }
-
   /**
    * Window resize event
    * TODO: Prevent android unlock events
    * @param e
    */
   public onWindowResizeCb = (e) => this.onWindowResize(e);
   private async onWindowResize(e) {
-    // Doesn't re-build if callback from keyboard
-    if (this.keyboardVisible) {
+    // If form element active - recognize here as Keyboard event
+    // TODO: if window screen not changed condition also (desktop input focus + resize)
+    if (this.isFormElement(document.activeElement)) {
       return;
     }