More robust autoscroll and autoscroll prevention

src/@types/VirtualKeyboardState.ts

@@ -2,6 +2,8 @@
 export default interface VirtualKeyboardState {
   /** True if the virtual keyboard is open. */
   open: boolean
-  /** The height of the virtual keyboard in pixels. */
+  /** The height of the virtual keyboard in pixels. Spring-animated while the keyboard slides, for UI that rides the keyboard (see usePositionFixed). */
   height: number
+  /** The height the keyboard is animating toward — its final height, known as soon as it starts moving. Changes once per keyboard event (open, close, resize), so subscribe to this slice to react to keyboard events without firing on every animation frame. On iOS Safari, where the final height cannot be measured until the keyboard settles, this is a predicted final height learned from the previous open (see iOSSafariHandler). */
+  targetHeight: number
 }

src/components/Editable.tsx

@@ -577,7 +577,9 @@ const Editable = ({
         })
       }
 
-      if (suppressFocusStore.getState()) return
+      if (suppressFocusStore.getState()) {
+        return
+      }
       // Update editingValueUntrimmedStore with the current value
       editingValueUntrimmedStore.update(value)
 

src/components/Editable/useEditMode.ts

@@ -1,14 +1,13 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
 import { useStore } from 'react-redux'
 import { useDispatch } from 'react-redux'
 import Path from '../../@types/Path'
 import { setCursorActionCreator as setCursor } from '../../actions/setCursor'
 import { isMac, isSafari, isTouch } from '../../browser'
 import { LongPressState } from '../../constants'
-import asyncFocus from '../../device/asyncFocus'
+import focusWithoutAutoscroll from '../../device/focusWithoutAutoscroll'
 import getCaretOffset from '../../device/getCaretOffset'
-import preventAutoscroll, { preventAutoscrollEnd } from '../../device/preventAutoscroll'
 import * as selection from '../../device/selection'
 import usePrevious from '../../hooks/usePrevious'
 import hasMulticursor from '../../selectors/hasMulticursor'
@@ -40,12 +39,10 @@ const useEditMode = ({
   const disabledRef = useRef(false)
   const editableNonce = useSelector(state => state.editableNonce)
   const showSidebar = useSelector(state => state.showSidebar)
-  const fontSize = useSelector(state => state.fontSize)
   const isCursor = useSelector(state => equalPath(path, state.cursor))
   const hadSidebar = usePrevious(showSidebar)
   const store = useStore()
   const dispatch = useDispatch()
-  const offsetRef = useRef<number | null>(null)
 
   // focus on the ContentEditable element if editing or on desktop
   const editMode = !isTouch || editing
@@ -55,18 +52,7 @@ const useEditMode = ({
     () => {
       // Get the cursorOffset directly from the store rather than subscribing to it reactively with useSelector.
       // Otherwise, it will try to set the selection while typing.
-      const { cursorOffset, lastUndoableActionType } = store.getState()
-
-      /** Set the selection to the current Editable at the cursor offset. */
-      const setSelectionToCursorOffset = () => {
-        // do not set the selection on hidden thoughts, otherwise it will cause a faulty focus event when switching windows
-        // https://github.com/cybersemics/em/issues/1596
-        if (style?.visibility === 'hidden') {
-          selection.clear()
-        } else {
-          selection.set(contentRef.current, { offset: cursorOffset ?? 0 })
-        }
-      }
+      const { cursorOffset } = store.getState()
 
       // allow transient editable to have focus on render
       const shouldSetSelection =
@@ -80,28 +66,19 @@ const useEditMode = ({
           !dragHold &&
           !disabledRef.current)
 
-      if (shouldSetSelection) {
-        preventAutoscroll(contentRef.current)
-
-        /*
-        When a new thought is created, the Shift key should be on when Auto-Capitalization is enabled.
-        On Mobile Safari, Auto-Capitalization is broken if the selection is set synchronously (#999).
-        Only breaks on Enter or Backspace, not gesture.
-
-        setTimeout fixes it, however it introduces an infinite loop when a nested empty thought is created.
-        Not calling asyncFocus when the selection is already on a thought prevents the infinite loop.
-        Also, setTimeout is frequently pushed into the next frame and the keyboard will intermittently close on iOS Safari.
-        Replacing setTimeout with requestAnimationFrame guarantees (hopefully?) that it will be processed before the next repaint,
-        keeping the keyboard open while rapidly deleting thoughts. (#3129)
-
-        If the last action is swapParent, set the selection synchronously to keep the focus stable after the swap.
-      */
-        if (isTouch && isSafari() && lastUndoableActionType !== 'swapParent' && !selection.isThought()) {
-          asyncFocus()
-        }
+      if (!shouldSetSelection) return
 
-        setSelectionToCursorOffset()
+      // do not set the selection on hidden thoughts, otherwise it will cause a faulty focus event when switching windows
+      // https://github.com/cybersemics/em/issues/1596
+      if (style?.visibility === 'hidden') {
+        selection.clear()
+        return
       }
+
+      // Whenever the cursor changes programmatically, focusWithoutAutoscroll focuses, places the
+      // caret, and suppresses the native focus + selection autoscroll that would otherwise jolt
+      // `position: fixed` elements on iOS (#3765).
+      focusWithoutAutoscroll(contentRef.current, { offset: cursorOffset ?? 0 })
     },
     // React Hook useEffect has missing dependencies: 'contentRef', 'editMode', and 'style?.visibility'.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -122,33 +99,15 @@ const useEditMode = ({
     ],
   )
 
-  // Provide an escape hatch to allow the next default selection rather than setting it.
-  // This allows the user to set the selection in the middle of a non-cursor thought when keyboard is open.
-  // Otherwise the caret is moved to the beginning of the thought.
-  const allowDefaultSelection = useCallback(() => {
-    disabledRef.current = true
-    // enable on next tick, which is long enough to skip the next setSelectionToCursorOffset
-    setTimeout(() => {
-      disabledRef.current = false
-    })
-  }, [])
-
   // Handles the caret positioning logic for the editable element.
   useEffect(() => {
     const editable = contentRef.current
     if (!editable) return
 
-    /** Sets the DOM selection and updates the Redux cursor state. */
-    const setCaretOffset = (offset: number) => {
-      selection.set(editable, { offset })
-      dispatch(setCursor({ path, offset }))
-    }
-
     /**
      * Handles the mousedown event for the editable element.
      * Prevents focus on non-cursor thoughts or during multiselect clicks.
-     * When editing or cursor is present (and multicursor is not active), computes the caret position manually so that it can be set on mouseup.
-     * Prevents default behavior and manages autoscroll for certain edge cases where browser selection would be incorrect.
+     * When editing or cursor is present (and multicursor is not active), computes the caret position manually and routes through focusWithoutAutoscroll so the iOS native autoscroll never fires.
      */
     const onMouseDown = (e: MouseEvent) => {
       // If CMD/CTRL is pressed, don't focus the editable.
@@ -158,38 +117,41 @@ const useEditMode = ({
         return
       }
 
-      // If editing or the cursor is on the thought, allow the default browser selection or perform manual caret positioning so the offset is correct.
+      // If editing or the cursor is on the thought, perform manual caret positioning so the offset is correct.
       // See: #981
       if (editingOrOnCursor && !isMulticursor) {
-        // Prevent the browser from autoscrolling to this editable element.
-        // For some reason doesn't work on touchend.
-        preventAutoscroll(editable, {
-          // about the height of a single-line thought
-          bottomMargin: fontSize * 2,
-        })
-
         const { inVoidArea, offset } = getCaretOffset(editable, {
           clientX: e.clientX,
           clientY: e.clientY,
         })
 
-        if (offset !== null) {
-          if (isTouch && isSafari()) {
-            offsetRef.current = offset
-            allowDefaultSelection()
-          } else {
-            setCaretOffset(offset)
-          }
-
-          // It's important to avoid preventDefault when the tap is somewhere that can be handled by native browser selection behavior.
-          // If the tap is prevented, it will interfere with functionality like double tap or the context menu. If the selection is
-          // truly in a void area, then preventDefault will stop the caret from being placed on the wrong thought.
-          if (inVoidArea) {
-            e.preventDefault()
-          }
-        } else {
-          allowDefaultSelection()
+        // Block the native mousedown so it can't focus the element and place the caret itself.
+        // There are two reasons we want to do this:
+        // 1. iOS Safari: always block; let focusWithoutAutoscroll re-takes focus cleanly.
+        // 2. Block when the tap lands in a void area (outside any text node) to stop the caret from being
+        // placed on the wrong thought.
+        if ((isTouch && isSafari()) || inVoidArea) {
+          e.preventDefault()
         }
+
+        // getCaretOffset returns null for empty thoughts (no text nodes). We still need to take
+        // focus on those — otherwise tapping an empty thought that is already the cursor leaves
+        // it unfocused and the keyboard never opens.
+        const targetOffset = offset ?? 0
+
+        // Dispatch setCursor first so Editable.onFocus's setCursorOnThought sees
+        // state.cursor === path and early-returns instead of setting cursorOffset to 0.
+        dispatch(
+          setCursor({
+            path,
+            offset: targetOffset,
+            isKeyboardOpen: true,
+            cursorHistoryClear: true,
+            preserveMulticursor: true,
+          }),
+        )
+
+        focusWithoutAutoscroll(editable, { offset: targetOffset })
       } else {
         // There are areas on the outside edge of the thought that will fail to trigger onTouchEnd.
         // In those cases, it is best to prevent onFocus or onClick, otherwise keyboard is open will be incorrectly activated.
@@ -199,34 +161,11 @@ const useEditMode = ({
       }
     }
 
-    /**
-     * Handles the mouseup event for the editable element.
-     * Preserve native drag selection behavior by deferring setCaretOffset until mouseup.
-     */
-    const onMouseUp = (e: MouseEvent) => {
-      if (offsetRef.current !== null) {
-        // Certain taps that are outside of the regular bounds of the editable element will fail to trigger onMouseUp.
-        // In those cases, allowDefaultSelection will be activated in onMouseDown, which will allow the native browser
-        // selection behavior to take over instead of responding to setCursor with a null offset.
-        disabledRef.current = false
-        setCaretOffset(offsetRef.current)
-      }
-
-      /** Prevents the thought from autoscrolling to the bottom of the screen when the keyboard is open.
-       * Autoscroll must be prevented until focus handling is complete, so preventAutoscrollEnd is deferred
-       * using queueMicrotask without introducing any additional delay.
-       */
-      queueMicrotask(() => preventAutoscrollEnd(editable))
-    }
-
     editable.addEventListener('mousedown', onMouseDown)
-    if (isTouch && isSafari()) editable.addEventListener('mouseup', onMouseUp)
-
     return () => {
       editable.removeEventListener('mousedown', onMouseDown)
-      if (isTouch && isSafari()) editable.removeEventListener('mouseup', onMouseUp)
     }
-  }, [contentRef, editingOrOnCursor, isCursor, isMulticursor, fontSize, allowDefaultSelection, path, dispatch])
+  }, [contentRef, editingOrOnCursor, isMulticursor, path, dispatch])
 
   // Resume focus if sidebar was just closed and isEditing is true.
   // Disable focus restoration on mobile until the hamburger menu & sidebar backdrop can be made to

src/components/Note.tsx

@@ -12,7 +12,8 @@ import { setDescendantActionCreator as setDescendant } from '../actions/setDesce
 import { setNoteFocusActionCreator as setNoteFocus } from '../actions/setNoteFocus'
 import { toggleNoteActionCreator as toggleNote } from '../actions/toggleNote'
 import { isTouch } from '../browser'
-import preventAutoscroll, { preventAutoscrollEnd } from '../device/preventAutoscroll'
+import focusWithoutAutoscroll from '../device/focusWithoutAutoscroll'
+import getCaretOffset from '../device/getCaretOffset'
 import * as selection from '../device/selection'
 import useFreshCallback from '../hooks/useFreshCallback'
 import getThoughtById from '../selectors/getThoughtById'
@@ -48,7 +49,6 @@ const Note = React.memo(
 
     /** Focus Handling with useFreshCallback. */
     const onFocus = useFreshCallback(() => {
-      preventAutoscrollEnd(noteRef.current)
       dispatch(
         setCursor({
           path,
@@ -60,11 +60,10 @@ const Note = React.memo(
       )
     }, [dispatch, path])
 
-    // set the caret on the note if editing this thought and noteFocus is true
+    // Set the caret on the note when noteFocus opens it programmatically (toggleNote command).
     useEffect(() => {
-      // cursor must be true if note is focused
       if (hasFocus && noteOffset !== null) {
-        selection.set(noteRef.current!, { offset: noteOffset })
+        focusWithoutAutoscroll(noteRef.current, { offset: noteOffset })
       }
     }, [hasFocus, noteOffset])
 
@@ -150,7 +149,17 @@ const Note = React.memo(
       [dispatch],
     )
 
-    const onMouseDown = useCallback(() => preventAutoscroll(noteRef.current), [noteRef])
+    const onMouseDown = useCallback((e: React.MouseEvent) => {
+      const note = noteRef.current
+      if (!note) return
+
+      // Block native focus + native caret-from-tap, then route through focusWithoutAutoscroll
+      // (the same single entry point Editable uses) — focuses with preventScroll, places the
+      // caret at the tap offset, and suppresses the selection-driven autoscroll on iOS.
+      const { offset } = getCaretOffset(note, { clientX: e.clientX, clientY: e.clientY })
+      e.preventDefault()
+      focusWithoutAutoscroll(note, { offset: offset ?? 0 })
+    }, [])
 
     const onCopy = useCallback((e: React.ClipboardEvent) => {
       const html = selection.html()

src/components/VirtualThought.tsx

@@ -151,10 +151,6 @@ const VirtualThought = ({
     )
     const widthNew = ref.current.querySelector(`[data-editable]`)?.getBoundingClientRect().width
 
-    // skip updating height when preventAutoscroll is enabled, as it modifies the element's height in order to trick Safari into not scrolling
-    const editable = ref.current.querySelector(`[data-editable]`)
-    if (editable?.hasAttribute('data-prevent-autoscroll')) return
-
     // Get the updated autofocus, otherwise isVisible will be stale.
     // Using the local autofocus and adding it as a dependency works when clicking on the cursor's parent but not when activating cursorBack from the keyboad for some reason.
     const isVisibleNew = autofocus === 'show' || autofocus === 'dim'

src/device/asyncFocus.ts

@@ -35,7 +35,12 @@ export const AsyncFocus: () => () => void = () => {
     // do not set the selection if it is already on a thought or a note
     if (!selection.isThought()) {
       hiddenInput.disabled = false
-      hiddenInput.focus()
+      // preventScroll: true — the hidden input is pinned at the top of the document, so without
+      // this iOS would briefly scroll the page back to top before our real focusWithoutAutoscroll
+      // call takes over. preventScroll does not affect the focus itself, which is the whole point
+      // of asyncFocus (priming the active editing session that makes iOS honor programmatic
+      // selection — see focusWithoutAutoscroll).
+      hiddenInput.focus({ preventScroll: true })
       // the hidden input should not be a valid focus target unless this function was invoked
       hiddenInput.disabled = true
     }

src/device/autoscrollEdges.ts

@@ -0,0 +1,72 @@
+import store from '../stores/app'
+import viewportStore from '../stores/viewport'
+import virtualKeyboardStore from '../stores/virtualKeyboardStore'
+
+/** The trigger edges (in viewport coordinates) that scrollCursorIntoView uses to decide whether to autoscroll.
+ * Between topEdge and bottomEdge is the comfort zone: a cursor inside it never triggers a scroll; a cursor
+ * crossing either edge does. Each edge is inset from its occluder (toolbar / keyboard+navbar) by a
+ * trigger buffer so that scrolling starts before the cursor reaches the occluder. The trigger buffer
+ * decides when a scroll starts; where the cursor settles afterwards is the landing margin in
+ * scrollCursorIntoView. */
+export interface AutoscrollEdges {
+  /** Bottom of the toolbar — the top of the visible area, in viewport coords. */
+  toolbarBottom: number
+  /** Height of the navbar at the bottom of the visible area. */
+  navbarHeight: number
+  /** Height of the virtual keyboard in px. 0 when closed. */
+  keyboardInset: number
+  /** Trigger buffer that insets topEdge below the toolbar — see getAutoscrollEdges. */
+  topBuffer: number
+  /** Trigger buffer that insets bottomEdge above the keyboard/navbar. 0 while the keyboard is open — see getAutoscrollEdges. */
+  bottomBuffer: number
+  /** Crossing above this edge triggers a scroll. */
+  topEdge: number
+  /** Crossing below this edge triggers a scroll. */
+  bottomEdge: number
+}
+
+/** Reads the live DOM and store values needed to compute the autoscroll trigger edges. */
+export const getAutoscrollEdges = (): AutoscrollEdges => {
+  const toolbarRect = document.getElementById('toolbar')?.getBoundingClientRect()
+  const navbarRect = document.querySelector('[aria-label="nav"]')?.getBoundingClientRect()
+  const toolbarBottom = toolbarRect ? toolbarRect.bottom : 0
+  const navbarHeight = navbarRect?.height ?? 0
+
+  // Use the keyboard's target height — where it will be once its animation settles — rather than
+  // the spring-animated `height`. The edges are end-state math: the scroll they trigger is itself
+  // animated, so what matters is where the cursor sits relative to the keyboard's final position,
+  // not its mid-slide position. On platforms without a virtual keyboard, like desktop, the store
+  // stays closed with targetHeight 0, so no inset gets applied.
+  const { targetHeight: keyboardInset, open: keyboardOpen } = virtualKeyboardStore.getState()
+
+  const fontSize = store.getState().fontSize
+
+  // No bottom trigger buffer while the keyboard is open: the edge sits right at the keyboard,
+  // leaving just enough room for one line of text above it.
+  const bottomBuffer = keyboardOpen ? 0 : fontSize * 2
+
+  // Top trigger buffer, mirroring bottomBuffer: inset topEdge ~one thought below the toolbar so a
+  // scroll fires before the cursor slips fully under it. Without this buffer the cursor has to pass
+  // entirely under the toolbar before anything happens, which makes scrolling upward (cursorUp /
+  // arrow-up) feel sticky. Constant regardless of keyboard state, since the toolbar — unlike the
+  // keyboard — does not move.
+  // NOTE (#3765): newly symmetric with the bottom edge; tune fontSize * 2 or set to 0 (flush to the
+  // toolbar, headroom from the landing margin alone) if the upward scroll over-reveals.
+  const topBuffer = fontSize * 2
+
+  const topEdge = toolbarBottom + topBuffer
+  const bottomEdge = window.innerHeight - keyboardInset - navbarHeight - bottomBuffer
+
+  return {
+    toolbarBottom,
+    navbarHeight,
+    keyboardInset,
+    topBuffer,
+    bottomBuffer,
+    topEdge,
+    bottomEdge,
+  }
+}
+
+/** The y position of the layout tree relative to the document, from the viewport store. Fallback for scrollCursorIntoView when the cursor element's offsetParent cannot be read from the DOM. */
+export const getLayoutTreeTop = () => viewportStore.getState().layoutTreeTop