fix(keyboard): detach resize from keyboard events (#112)

tech-systems · Nov 15, 2021 · 5d574d7 · 5d574d7
1 parent bf34a24
commit 5d574d7
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 23 deletions.
diff --git a/dist/cupertino-pane.esm.js b/dist/cupertino-pane.esm.js
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: November 12, 2021
+ * Released on: November 15, 2021
  */
 
 /*! *****************************************************************************
@@ -580,6 +580,7 @@ class Events {
         }
     }
     onKeyboardShow(e) {
+        this.keyboardVisible = true;
         // focud element not inside pane
         if (!this.isPaneDescendant(document.activeElement)) {
             return;
@@ -625,11 +626,16 @@ class Events {
     }
     onWindowResize(e) {
         return __awaiter(this, void 0, void 0, function* () {
-            // If form element active - recognize here as Keyboard event
-            // TODO: if window screen not changed condition also (desktop input focus + resize)
+            // We should separate keyboard and resize events
+            // If form element active - recognize here as KeyboardWillShow
             if (this.isFormElement(document.activeElement)) {
                 return;
             }
+            if (!this.isFormElement(document.activeElement)
+                && this.keyboardVisible) {
+                this.keyboardVisible = false;
+                return;
+            }
             yield new Promise((resolve) => setTimeout(() => resolve(true), 150));
             this.instance.updateScreenHeights();
             this.breakpoints.buildBreakpoints(JSON.parse(this.breakpoints.lockedBreakpoints));
@@ -949,9 +955,11 @@ class Breakpoints {
                 }
                 // Move to any if removed
                 if (!((_e = this.settings.breaks[this.prevBreakpoint]) === null || _e === void 0 ? void 0 : _e.enabled)) {
-                    let nextY = this.instance.swipeNextPoint(1, 1, this.getClosestBreakY());
-                    const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
-                    this.instance.moveToBreak(nextBreak[0]);
+                    if (!this.instance.isHidden()) {
+                        let nextY = this.instance.swipeNextPoint(1, 1, this.getClosestBreakY());
+                        const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
+                        this.instance.moveToBreak(nextBreak[0]);
+                    }
                 }
                 // Re-calc height and top
                 this.instance.paneEl.style.top = this.settings.inverse

diff --git a/dist/cupertino-pane.esm.min.js b/dist/cupertino-pane.esm.min.js
diff --git a/dist/cupertino-pane.esm.min.js.map b/dist/cupertino-pane.esm.min.js.map
diff --git a/dist/cupertino-pane.js b/dist/cupertino-pane.js
diff --git a/dist/cupertino-pane.js.map b/dist/cupertino-pane.js.map
diff --git a/dist/cupertino-pane.min.js b/dist/cupertino-pane.min.js
diff --git a/src/breakpoints.ts b/src/breakpoints.ts
@@ -171,9 +171,11 @@ export class Breakpoints {
 
       // Move to any if removed
       if (!this.settings.breaks[this.prevBreakpoint]?.enabled) {
-        let nextY = this.instance.swipeNextPoint(1, 1, this.getClosestBreakY());
-        const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
-        this.instance.moveToBreak(nextBreak[0]);
+        if (!this.instance.isHidden()) {
+          let nextY = this.instance.swipeNextPoint(1, 1, this.getClosestBreakY());
+          const nextBreak = Object.entries(this.breaks).find(val => val[1] === nextY);
+          this.instance.moveToBreak(nextBreak[0]);
+        }
       }
 
       // Re-calc height and top

diff --git a/src/events.ts b/src/events.ts
@@ -458,6 +458,8 @@ export class Events {
    */
   public onKeyboardShowCb = (e) => this.onKeyboardShow(e);
   private onKeyboardShow(e) {
+    this.keyboardVisible = true;
+
     // focud element not inside pane
     if (!this.isPaneDescendant(document.activeElement)) {
       return;
@@ -524,11 +526,16 @@ export class Events {
    */
   public onWindowResizeCb = (e) => this.onWindowResize(e);
   private async onWindowResize(e) {
-    // If form element active - recognize here as Keyboard event
-    // TODO: if window screen not changed condition also (desktop input focus + resize)
+    // We should separate keyboard and resize events
+    // If form element active - recognize here as KeyboardWillShow
     if (this.isFormElement(document.activeElement)) {
       return;
     }
+    if (!this.isFormElement(document.activeElement) 
+        && this.keyboardVisible) {
+      this.keyboardVisible = false;
+      return;
+    }
 
     await new Promise((resolve) => setTimeout(() => resolve(true), 150));
     this.instance.updateScreenHeights();