fix: find the caret domrect with largest bottom value (#454)

src/web/cursorUtils.ts

@@ -145,18 +145,30 @@ function scrollCursorIntoView(target: HTMLInputElement) {
     return;
   }
 
-  const caretRect = selection.getRangeAt(0).getClientRects()[0];
+  const caretRects = selection.getRangeAt(0).getClientRects();
+
+  // we'll find the caretRect from the DOMRectList above with the largest bottom value
+  let currentCaretRect = caretRects[0];
+  if (currentCaretRect) {
+    for (let i = 1; i < caretRects.length; i++) {
+      const caretRect = caretRects[i];
+      if (caretRect && caretRect.bottom > currentCaretRect.bottom) {
+        currentCaretRect = caretRect;
+      }
+    }
+  }
+
   const editableRect = target.getBoundingClientRect();
 
   // Adjust for padding and border
   const paddingTop = parseFloat(window.getComputedStyle(target).paddingTop);
   const borderTop = parseFloat(window.getComputedStyle(target).borderTopWidth);
 
-  if (caretRect && !(caretRect.top >= editableRect.top + paddingTop + borderTop && caretRect.bottom <= editableRect.bottom - 2 * (paddingTop - borderTop))) {
-    const topToCaret = caretRect.top - editableRect.top;
+  if (currentCaretRect && !(currentCaretRect.top >= editableRect.top + paddingTop + borderTop && currentCaretRect.bottom <= editableRect.bottom - 2 * (paddingTop - borderTop))) {
+    const topToCaret = currentCaretRect.top - editableRect.top;
     const inputHeight = editableRect.height;
     // Chrome Rects don't include padding & border, so we're adding them manually
-    const inputOffset = caretRect.height - inputHeight + paddingTop + borderTop + (BrowserUtils.isChromium ? 0 : 4 * (paddingTop + borderTop));
+    const inputOffset = currentCaretRect.height - inputHeight + paddingTop + borderTop + (BrowserUtils.isChromium ? 0 : 4 * (paddingTop + borderTop));
 
     target.scrollTo(0, topToCaret + target.scrollTop + inputOffset);
   }