fix: update modal behavior and styles for improved iOS keyboard handling

wiris · Dec 4, 2024 · 9902cbb · 9902cbb
1 parent e9e9074
commit 9902cbb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 18 deletions.
diff --git a/packages/ckeditor5/dist/browser/index.js b/packages/ckeditor5/dist/browser/index.js
@@ -8116,7 +8116,6 @@ var maxHoverIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
             // iOS keyboard is a float div which can overlay the modal object.
             if (this.deviceProperties.isIOS) {
                 this.iosSoftkeyboardOpened = false;
-                this.setContainerHeight(`${100 + this.iosMeasureUnit}`);
             }
         }
         if (!ContentManager.isEditorLoaded()) {

diff --git a/packages/devkit/src/modal.js b/packages/devkit/src/modal.js
@@ -48,7 +48,7 @@ export default class ModalDialog {
     const isIOS = ContentManager.isIOS();
     this.iosSoftkeyboardOpened = false;
     this.iosMeasureUnit = ua.indexOf("crios") === -1 ? "%" : "vh";
-    this.iosDivHeight = `100%${this.iosMeasureUnit}`;
+    this.iosDivHeight = `auto`;
 
     const deviceWidth = window.outerWidth;
     const deviceHeight = window.outerHeight;
@@ -537,7 +537,6 @@ export default class ModalDialog {
       // iOS keyboard is a float div which can overlay the modal object.
       if (this.deviceProperties.isIOS) {
         this.iosSoftkeyboardOpened = false;
-        this.setContainerHeight(`${100 + this.iosMeasureUnit}`);
       }
     }
 
@@ -1440,22 +1439,29 @@ export default class ModalDialog {
    * Event handler that change container size when IOS soft keyboard is opened.
    */
   handleOpenedIosSoftkeyboard() {
-    if (!this.iosSoftkeyboardOpened && this.iosDivHeight != null && this.iosDivHeight === `100${this.iosMeasureUnit}`) {
+    if (
+      !this.iosSoftkeyboardOpened && this.iosDivHeight != null &&
+      this.iosDivHeight === `auto`
+    ) {
       if (this.portraitMode()) {
         this.setContainerHeight(`60${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
       } else {
         this.setContainerHeight(`35${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
       }
     }
     this.iosSoftkeyboardOpened = true;
+    //change  this.wrapper to  flex-grow 1
+    this.wrapper.style.flexGrow = "1";
   }
 
   /**
    * Event handler that change container size when IOS soft keyboard is closed.
    */
   handleClosedIosSoftkeyboard() {
     this.iosSoftkeyboardOpened = false;
-    this.setContainerHeight(`100${this.iosMeasureUnit}`);
+    this.wrapper.style.flexGrow = "1";
   }
 
   /**
@@ -1465,19 +1471,23 @@ export default class ModalDialog {
     if (this.iosSoftkeyboardOpened) {
       if (this.portraitMode()) {
         this.setContainerHeight(`65${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
+
       } else {
         this.setContainerHeight(`45${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
+
       }
     } else {
-      this.setContainerHeight(`100${this.iosMeasureUnit}`);
+      this.wrapper.style.flexGrow = "1";
     }
   }
 
   /**
    * Change container sizes when orientation is changed on Android.
    */
   orientationChangeAndroidSoftkeyboard() {
-    this.setContainerHeight("100%");
+    this.wrapper.style.flexGrow = "1";
   }
 
   /**

diff --git a/packages/devkit/styles/styles.css b/packages/devkit/styles/styles.css
@@ -160,17 +160,14 @@
 
 .wrs_modal_dialogContainer.wrs_modal_ios,
 .wrs_modal_dialogContainer.wrs_modal_android {
-  margin: 0;
-  position: fixed;  
-  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top)) !important;
-
+  margin: 0px;
+  position: fixed;
+  height: auto;
   overflow: hidden;
-  top: env(safe-area-inset-top);
-  left: env(safe-area-inset-left);
-  right: env(safe-area-inset-right);
-  bottom: env(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom) !important;
-
+  top: calc(env(safe-area-inset-top));
+  right: calc(env(safe-area-inset-right));
+  left: calc(env(safe-area-inset-left));
+  bottom: calc(env(safe-area-inset-bottom));
   transform: none;
   box-sizing: border-box;
   display: flex;
@@ -200,7 +197,7 @@
 
 .wrs_content_container.wrs_modal_ios,
 .wrs_content_container.wrs_modal_android {
-  flex-grow: 1;
+  flex-grow: 0.98;
   display: flex;
 }