fix: fix webchat not resizing properly on keyboard blur

hubtype · Sep 19, 2024 · 4dbb311 · 4dbb311
1 parent 2e6cfb8
commit 4dbb311
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts b/packages/botonic-react/src/webchat/hooks/use-webchat-resizer.ts
@@ -14,7 +14,6 @@ export const useWebchatResizer = host => {
       const keyboardOffset =
         (window.visualViewport && window.visualViewport.height) ||
         window.innerHeight
-
       let newWebchatPercentualHeight = keyboardOffset / webchatHeight
       newWebchatPercentualHeight =
         Math.round(newWebchatPercentualHeight * 100 * 100) / 100 // Two decimal places
@@ -29,16 +28,23 @@ export const useWebchatResizer = host => {
     ) {
       const newWebchatPercentualHeight = `${calculateNewWebchatElementHeight()}%`
       webchatRef.current.style.height = newWebchatPercentualHeight
+
       const newChatAreaHeight = `${webchatRef.current.clientHeight - headerRef.current.clientHeight - inputPanelRef.current.clientHeight}px`
+
       chatAreaRef.current.style.height = newChatAreaHeight
       scrollToBottom()
     }
   }
 
   const handleKeyboardHidden = () => {
-    if (webchatRef.current && chatAreaRef.current) {
+    if (
+      webchatRef.current &&
+      chatAreaRef.current &&
+      inputPanelRef.current &&
+      headerRef.current
+    ) {
       webchatRef.current.style.height = '100%'
-      chatAreaRef.current.style.height = '100%'
+      chatAreaRef.current.style.height = `${webchatRef.current.clientHeight - headerRef.current.clientHeight - inputPanelRef.current.clientHeight}px`
     }
   }