Extract utility isTextInput. Extract useSnapOnFocus for clarity and improves it for smoother experience.

Author: sclebal

src/hooks/isTextInput.ts

@@ -0,0 +1,12 @@
+/**
+ * Checks if an element is a text input
+ */
+
+export function isTextInput(el: Element | null): el is HTMLElement {
+  return (
+    el instanceof HTMLElement &&
+    (el.tagName === 'INPUT' ||
+      el.tagName === 'TEXTAREA' ||
+      el.isContentEditable)
+  );
+}

src/hooks/use-prevent-scroll.ts

@@ -2,6 +2,7 @@
 
 import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 import { isIOS } from '../utils';
+import { isTextInput } from './isTextInput';
 
 const KEYBOARD_BUFFER = 24;
 
@@ -164,7 +165,7 @@ function preventScrollMobileSafari() {
     // Reset scroll tracking for new gesture
     didScroll = false;
 
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
+    if (isTextInput(target)) return;
 
     // Store the nearest scrollable parent element from the element that the user touched.
     scrollable = getScrollParent(target, true);

src/hooks/use-scroll-to-focused-input.ts

@@ -1,4 +1,5 @@
 import { type RefObject, useEffect, useRef } from 'react';
+import { isTextInput } from './isTextInput';
 
 type UseScrollToFocusedInputOptions = {
   /**
@@ -70,18 +71,6 @@ function findAssociatedLabel(element: HTMLElement): HTMLElement | null {
   return null;
 }
 
-/**
- * Checks if an element is a text input
- */
-function isTextInput(el: Element | null): el is HTMLElement {
-  return (
-    el instanceof HTMLElement &&
-    (el.tagName === 'INPUT' ||
-      el.tagName === 'TEXTAREA' ||
-      el.isContentEditable)
-  );
-}
-
 /**
  * Scrolls a focused input (and its label) into view, centering it in the
  * visible area while respecting scroll bounds.

src/hooks/use-snap-on-focus.ts

@@ -0,0 +1,81 @@
+import { useEffect, type RefObject } from 'react';
+import { isTextInput } from './isTextInput';
+
+type UseSnapOnFocusOptions = {
+  /** Ref to the container element to listen for focus events */
+  containerRef: RefObject<HTMLElement | null>;
+  /** Whether the sheet is open */
+  isOpen: boolean;
+  /** Current snap point index */
+  currentSnap: number | undefined;
+  /** The last (full height) snap point index */
+  lastSnapPointIndex: number;
+  /** Whether the hook is enabled */
+  isEnabled: boolean;
+  /** Callback to snap to full height, returns a cleanup function to restore */
+  onSnapToFull: (() => VoidFunction) | (() => void);
+};
+
+/**
+ * Snaps the sheet to full height when an input/textarea inside receives focus.
+ * This happens before the keyboard opens, providing a smoother experience.
+ */
+export function useSnapOnFocus({
+  containerRef,
+  isOpen,
+  currentSnap,
+  lastSnapPointIndex,
+  isEnabled,
+  onSnapToFull,
+}: UseSnapOnFocusOptions) {
+  useEffect(() => {
+    if (!isOpen) return;
+    if (!isEnabled) return;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    let cleanup: (() => void) | undefined;
+
+    const handleFocusIn = (event: FocusEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (!target) return;
+
+      if (!isTextInput(target)) return;
+
+      // Already at full height, nothing to do
+      if (currentSnap === lastSnapPointIndex) return;
+
+      cleanup = onSnapToFull() ?? undefined;
+    };
+
+    const handleFocusOut = (event: FocusEvent) => {
+      const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+      // If focus is moving to another input inside the container, don't restore
+      if (relatedTarget && container.contains(relatedTarget)) {
+        if (!isTextInput(relatedTarget)) return;
+      }
+
+      // Focus left the container or moved to a non-input element, restore snap
+      cleanup?.();
+      cleanup = undefined;
+    };
+
+    container.addEventListener('focusin', handleFocusIn);
+    container.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      container.removeEventListener('focusin', handleFocusIn);
+      container.removeEventListener('focusout', handleFocusOut);
+      cleanup?.();
+    };
+  }, [
+    isOpen,
+    isEnabled,
+    containerRef,
+    currentSnap,
+    lastSnapPointIndex,
+    onSnapToFull,
+  ]);
+}

src/hooks/use-virtual-keyboard.ts

@@ -1,6 +1,6 @@
 import { type RefObject, useEffect, useRef, useState } from 'react';
-import { useStableCallback } from './use-stable-callback';
 import { isIOSSafari26 } from '../utils';
+import { isTextInput } from './isTextInput';
 
 type VirtualKeyboardState = {
   isVisible: boolean;
@@ -45,16 +45,6 @@ export function useVirtualKeyboard({
   const focusedElementRef = useRef<HTMLElement | null>(null);
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const isTextInput = useStableCallback((el: Element | null) => {
-    return (
-      el?.tagName === 'INPUT' ||
-      el?.tagName === 'TEXTAREA' ||
-      (includeContentEditable &&
-        el instanceof HTMLElement &&
-        el.isContentEditable)
-    );
-  });
-
   useEffect(() => {
     if (!isEnabled) return;
 

src/sheet.tsx

@@ -34,6 +34,7 @@ import { usePreventScroll } from './hooks/use-prevent-scroll';
 import { useSheetState } from './hooks/use-sheet-state';
 import { useStableCallback } from './hooks/use-stable-callback';
 import { useScrollToFocusedInput } from './hooks/use-scroll-to-focused-input';
+import { useSnapOnFocus } from './hooks/use-snap-on-focus';
 import { useVirtualKeyboard } from './hooks/use-virtual-keyboard';
 import {
   computeSnapPoints,
@@ -417,12 +418,14 @@ export const Sheet = forwardRef<any, SheetProps>(
       return onKeyboardOpen();
     });
 
-    useEffect(() => {
-      if (openStateRef.current !== 'open') return;
-      if (detent !== 'default') return;
-      if (!keyboard.isKeyboardOpen) return;
-      return handleKeyboardOpen();
-    }, [keyboard.isKeyboardOpen]);
+    useSnapOnFocus({
+      containerRef: positionerRef,
+      isOpen: openStateRef.current === 'open',
+      currentSnap,
+      lastSnapPointIndex,
+      isEnabled: detent === 'default',
+      onSnapToFull: handleKeyboardOpen,
+    });
 
     useScrollToFocusedInput({
       containerRef,
@@ -491,8 +494,10 @@ export const Sheet = forwardRef<any, SheetProps>(
               updateSnap(initialSnap);
             }
 
-            onOpenEnd?.();
             openStateRef.current = 'open';
+            requestAnimationFrame(() => {
+              onOpenEnd?.();
+            });
           };
 
           const doWhenSheetReady = () => {