🚸 Improve auto scroll behavior

Now only based on bottom of last element if it is in view
baptisteArno · Apr 24, 2024 · a7fc413 · a7fc413
1 parent 873ba0b
commit a7fc413
Show file tree

Hide file tree

Showing 13 changed files with 22 additions and 18 deletions.
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

diff --git a/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx b/packages/embeds/js/src/components/ConversationContainer/ConversationContainer.tsx
@@ -234,17 +234,15 @@ export const ConversationContainer = (props: Props) => {
     }
     const lastElementRect = lastElement.getBoundingClientRect()
     const containerRect = chatContainer.getBoundingClientRect()
-    const lastElementTopRelative =
-      lastElementRect.top - containerRect.top + chatContainer.scrollTop
 
-    const isLastElementInVisibleArea =
-      lastElementTopRelative < chatContainer.scrollTop + containerRect.height &&
-      lastElementTopRelative + lastElementRect.height > chatContainer.scrollTop
+    const isBottomOfLastElementInView =
+      lastElementRect.top + lastElementRect.height < containerRect.height
 
-    if (isLastElementInVisibleArea)
+    if (isBottomOfLastElementInView) {
       setTimeout(() => {
         chatContainer?.scrollTo(0, lastElement.offsetTop - offset)
       }, 50)
+    }
   }
 
   const handleAllBubblesDisplayed = async () => {

diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/Buttons.tsx
@@ -18,7 +18,7 @@ export const Buttons = (props: Props) => {
   const [filteredItems, setFilteredItems] = createSignal(props.defaultItems)
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemIndex: number) =>

diff --git a/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx b/packages/embeds/js/src/features/blocks/inputs/buttons/components/MultipleChoicesForm.tsx
@@ -19,7 +19,7 @@ export const MultipleChoicesForm = (props: Props) => {
   const [selectedItemIds, setSelectedItemIds] = createSignal<string[]>([])
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemId: string) => {

diff --git a/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx b/packages/embeds/js/src/features/blocks/inputs/email/components/EmailInput.tsx
@@ -33,7 +33,7 @@ export const EmailInput = (props: Props) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
     window.addEventListener('message', processIncomingEvent)
   })
 

diff --git a/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx b/packages/embeds/js/src/features/blocks/inputs/number/components/NumberInput.tsx
@@ -36,7 +36,7 @@ export const NumberInput = (props: NumberInputProps) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
     window.addEventListener('message', processIncomingEvent)
   })
 

diff --git a/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx b/packages/embeds/js/src/features/blocks/inputs/phone/components/PhoneInput.tsx
@@ -90,7 +90,7 @@ export const PhoneInput = (props: PhoneInputProps) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
     window.addEventListener('message', processIncomingEvent)
   })
 

diff --git a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/MultiplePictureChoice.tsx
@@ -22,7 +22,7 @@ export const MultiplePictureChoice = (props: Props) => {
   const [totalLoadedImages, setTotalLoadedImages] = createSignal(0)
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemId: string) => {

diff --git a/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx b/packages/embeds/js/src/features/blocks/inputs/pictureChoice/SinglePictureChoice.tsx
@@ -18,7 +18,7 @@ export const SinglePictureChoice = (props: Props) => {
   const [totalLoadedImages, setTotalLoadedImages] = createSignal(0)
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef) inputRef.focus({ preventScroll: true })
   })
 
   const handleClick = (itemIndex: number) => {

diff --git a/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx b/packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx
@@ -40,7 +40,10 @@ export const TextInput = (props: Props) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef)
+      inputRef.focus({
+        preventScroll: true,
+      })
     window.addEventListener('message', processIncomingEvent)
   })
 

diff --git a/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx b/packages/embeds/js/src/features/blocks/inputs/url/components/UrlInput.tsx
@@ -39,7 +39,10 @@ export const UrlInput = (props: Props) => {
   }
 
   onMount(() => {
-    if (!isMobile() && inputRef) inputRef.focus()
+    if (!isMobile() && inputRef)
+      inputRef.focus({
+        preventScroll: true,
+      })
     window.addEventListener('message', processIncomingEvent)
   })
 

diff --git a/packages/embeds/nextjs/package.json b/packages/embeds/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.2.79",
+  "version": "0.2.80",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",