Skip to content

Fix iOS mobile drawer input focus#32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Matia-R merged 4 commits into from
Jun 30, 2026
+258 −171
Merged

Fix iOS mobile drawer input focus #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c974959
Fix iOS mobile drawer input focus
cursoragent Jun 25, 2026
523c5f8
Fix mobile drawer input ref typing
cursoragent Jun 25, 2026
a4e1f68
add additional background layer when keyboard is open to cover url area
Matia-R Jun 27, 2026
309177d
make content full available height on ios safari
Matia-R Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions src/app/[username]/[slug]/layout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,20 +4,10 @@ import "~/app/_components/editor/style.css";

import "./published-document.css";

import { PublishedScrollRoot } from "./published-scroll-root";

/** Runs before paint so wheel scrolling works before React hydrates (class pairs with globals.css). */
const publishedScrollBootstrap = `(function(){document.documentElement.classList.add("published-page-scroll")})();`;

export default function PublishedDocumentLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<script dangerouslySetInnerHTML={{ __html: publishedScrollBootstrap }} />
<PublishedScrollRoot>{children}</PublishedScrollRoot>
</>
);
return children;
}
25 changes: 0 additions & 25 deletions src/app/[username]/[slug]/published-scroll-root.tsx
View file
Open in desktop

This file was deleted.

3 changes: 1 addition & 2 deletions src/app/_components/document-actions.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,7 +42,6 @@ export function DocumentActions() {
const [localDrawerOpen, setLocalDrawerOpen] = useState(false);

const drawerOpen = publishCtx?.mobileDrawerOpen ?? localDrawerOpen;
const mobileDrawerView = useDocumentPublishStore((s) => s.mobileDrawerView);
const setDrawerOpen = (next: boolean) => {
if (!next) {
useDocumentPublishStore.getState().setMobileDrawerView("main");
Expand DownExpand Up@@ -144,7 +143,7 @@ export function DocumentActions() {
<Drawer
open={drawerOpen}
onOpenChange={setDrawerOpen}
repositionInputs={mobileDrawerView === "edit-url"}
repositionInputs={false}
>
<DrawerTrigger asChild>{triggerButton}</DrawerTrigger>
<DrawerContent className={MOBILE_DRAWER_SHELL_CLASS}>
Expand Down
16 changes: 14 additions & 2 deletions src/app/_components/document-breadcrumb.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
"use client";

import { useParams } from "next/navigation";
import { flushSync } from "react-dom";
import { api } from "~/trpc/react";
import { BreadcrumbItem, Breadcrumb, BreadcrumbList } from "./breadcrumb";
import { useState } from "react";
Expand All@@ -15,7 +16,11 @@ import {
PopoverTrigger,
} from "~/app/_components/popover";
import { Input } from "~/app/_components/input";
import { MobileFormDrawer } from "~/app/_components/mobile-drawer";
import {
applyMobileDrawerKeyboardInset,
focusMobileDrawerInput,
MobileFormDrawer,
} from "~/app/_components/mobile-drawer";
Comment on lines +19 to +23

@coderabbitaicoderabbitaiBotJun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Drop the legacy inset helper from the title-drawer path.

MobileFormDrawer now owns keyboard layout, but Lines 168-170 still queue applyMobileDrawerKeyboardInset(), which imperatively resizes the first [data-vaul-drawer] in the document. That reintroduces the old global path on top of the new drawer-managed logic.

Suggested cleanup
 import {
- applyMobileDrawerKeyboardInset,
focusMobileDrawerInput,
MobileFormDrawer,
} from "~/app/_components/mobile-drawer";
@@
if (isMobile) {
flushSync(() => {
setDrawerOpen(true);
});
focusMobileDrawerInput(titleInputRef.current);
- window.setTimeout(() => {- applyMobileDrawerKeyboardInset();- }, 50);
} else {

Also applies to: 164-170

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/_components/document-breadcrumb.tsx` around lines 19 - 23, The
title-drawer path in document-breadcrumb still uses the legacy keyboard inset
helper alongside MobileFormDrawer, which duplicates drawer layout handling.
Update the breadcrumb/title drawer flow to stop calling
applyMobileDrawerKeyboardInset and rely on MobileFormDrawer’s built-in keyboard
management instead; keep focusMobileDrawerInput and the existing drawer
interactions intact, but remove the imperative global inset adjustment from the
title-drawer sequence.

import { useIsMobile } from "~/hooks/use-mobile";

export function DocumentBreadcrumb() {
Expand DownExpand Up@@ -156,7 +161,13 @@ export function DocumentBreadcrumb() {
const openTitleEditor = React.useCallback(() => {
setEditingName(document?.document?.name ?? "Untitled");
if (isMobile) {
setDrawerOpen(true);
flushSync(() => {
setDrawerOpen(true);
});
focusMobileDrawerInput(titleInputRef.current);
window.setTimeout(() => {
applyMobileDrawerKeyboardInset();
}, 50);
} else {
setPopoverOpen(true);
}
Expand DownExpand Up@@ -217,6 +228,7 @@ export function DocumentBreadcrumb() {
onCommit={commitTitle}
inputId="document-title-mobile"
inputLabel="Document title"
inputRef={titleInputRef}
/>
</>
) : (
Expand Down
106 changes: 78 additions & 28 deletions src/app/_components/drawer.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,20 +6,39 @@ import { Drawer as DrawerPrimitive } from "vaul";
import { cn } from "~/lib/utils";

const Drawer = ({
shouldScaleBackground = true,
shouldScaleBackground = false,
noBodyStyles = true,
fixed = true,
repositionInputs = true,
open,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
);
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
React.useEffect(() => {
if (!open) return;

document.documentElement.dataset.mobileDrawerOpen = "";

return () => {
delete document.documentElement.dataset.mobileDrawerOpen;
};
}, [open]);
Comment on lines +16 to +24

@coderabbitaicoderabbitaiBotJun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash# Find Drawer usages and check whether any are uncontrolled (no `open` prop)
rg -nP --type=tsx -C4 '<Drawer(\s|>)' src

Repository: Matia-R/Chptr

Length of output: 179

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== Drawer component ==\n'
ast-grep outline src/app/_components/drawer.tsx --view expanded ||trueprintf'\n== Drawer usages ==\n'
rg -n -C 3 --glob '*.tsx''<Drawer(\s|>|[^A-Za-z])' src ||trueprintf'\n== Related scroll-lock selector ==\n'
rg -n 'mobileDrawerOpen|data-app-scroll-root|DrawerTrigger|defaultOpen|onOpenChange' src ||true

Repository: Matia-R/Chptr

Length of output: 4391

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== src/app/_components/drawer.tsx ==\n'
cat -n src/app/_components/drawer.tsx | sed -n '1,220p'printf'\n== src/app/_components/document-actions.tsx ==\n'
cat -n src/app/_components/document-actions.tsx | sed -n '1,240p'printf'\n== src/app/_components/mobile-drawer/mobile-form-drawer.tsx ==\n'
cat -n src/app/_components/mobile-drawer/mobile-form-drawer.tsx | sed -n '1,260p'printf'\n== src/app/_components/document-breadcrumb.tsx ==\n'
cat -n src/app/_components/document-breadcrumb.tsx | sed -n '200,280p'

Repository: Matia-R/Chptr

Length of output: 22800

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== Where the drawer wrappers are mounted ==\n'
rg -n --glob '*.tsx''DocumentActions|DocumentBreadcrumb|MobileFormDrawer|Drawer\>' src/app src/hooks ||trueprintf'\n== Mobile drawer state coordination ==\n'
rg -n --glob '*.tsx''mobileDrawerOpen|setMobileDrawerOpen|mobileDrawerView|anyPublishPanelOpen|onAuxiliaryOpenChange' src/app src/hooks ||true

Repository: Matia-R/Chptr

Length of output: 3008

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== All Drawer JSX usages ==\n'
rg -n --glob '*.tsx''<Drawer(\s|>|[[:space:]])' src/app src/hooks ||trueprintf'\n== Drawer wrapper consumers ==\n'
rg -n --glob '*.tsx''from ".*\/drawer"|from '\''.*\/drawer'\''' src/app src/hooks ||trueprintf'\n== document-publish hook ==\n'
cat -n src/hooks/use-document-publish.tsx | sed -n '250,340p'printf'\n== document-publish button ==\n'
cat -n src/app/_components/document-publish-button.tsx | sed -n '1,120p'

Repository: Matia-R/Chptr

Length of output: 7802

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== Drawer imports/usages ==\n'
rg -n --glob '*.tsx''import \{[^}]*Drawer[^}]*\} from .*drawer|<Drawer\b|<Drawer ' src/app src/hooks ||trueprintf'\n== Document page composition ==\n'
rg -n --glob '*.tsx''DocumentActions|DocumentBreadcrumb' src/app ||trueprintf'\n== Layouts/pages that render both ==\n'
rg -n --glob '*.tsx''DocumentActions|DocumentBreadcrumb' src/app | sed -n '1,120p'||trueprintf'\n== use-document-publish.tsx (state around drawer) ==\n'
cat -n src/hooks/use-document-publish.tsx | sed -n '1,220p'

Repository: Matia-R/Chptr

Length of output: 11030

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== Drawer imports/usages ==\n'
rg -n --glob '*.tsx''import \{[^}]*Drawer[^}]*\} from .*drawer|<Drawer\b|<Drawer ' src/app src/hooks ||trueprintf'\n== Document page composition ==\n'
rg -n --glob '*.tsx''DocumentActions|DocumentBreadcrumb' src/app ||trueprintf'\n== use-document-publish.tsx (state around drawer) ==\n'
cat -n src/hooks/use-document-publish.tsx | sed -n '1,220p'

Repository: Matia-R/Chptr

Length of output: 10511

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== DocumentActions / DocumentBreadcrumb references ==\n'
rg -n --glob '*.tsx''DocumentActions|DocumentBreadcrumb' src/app ||trueprintf'\n== Document page/layout files ==\n'
fd -t f -a 'layout.tsx' src/app ||true
fd -t f -a 'page.tsx' src/app ||trueprintf'\n== Document route layout ==\n'
cat -n src/app/documents/layout.tsx | sed -n '1,220p'

Repository: Matia-R/Chptr

Length of output: 4121

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== DocumentActions / DocumentBreadcrumb references ==\n'
rg -n --glob '*.tsx''DocumentActions|DocumentBreadcrumb' src/app ||trueprintf'\n== Document route tree ==\n'
fd -t f -a 'src/app/**/layout.tsx''src/app/**/page.tsx'2>/dev/null | sed -n '1,120p'||trueprintf'\n== app/documents/layout.tsx ==\n'
cat -n src/app/documents/layout.tsx | sed -n '1,220p'printf'\n== files that import DocumentActions or DocumentBreadcrumb ==\n'
rg -n --glob '*.tsx''from ".*document-actions"|from ".*document-breadcrumb"' src/app ||true

Repository: Matia-R/Chptr

Length of output: 3757

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== document route layout ==\n'
cat -n src/app/documents/layout.tsx | sed -n '1,220p'printf'\n== document-related component imports ==\n'
rg -n --glob '*.tsx''from "~/app/_components/document-actions"|from "~/app/_components/document-breadcrumb"|from "./document-actions"|from "./document-breadcrumb"' src/app ||true

Repository: Matia-R/Chptr

Length of output: 3170

🏁 Script executed:

#!/bin/bashset -euo pipefail
printf'\n== src/app/_components/document-breadcrumb.tsx ==\n'
cat -n src/app/_components/document-breadcrumb.tsx | sed -n '1,220p'printf'\n== src/app/_components/editor/document-publish-store.ts ==\n'
cat -n src/app/_components/editor/document-publish-store.ts | sed -n '1,220p'

Repository: Matia-R/Chptr

Length of output: 11074

Shared drawer flag can be cleared too early
src/app/_components/drawer.tsx writes a single global html[data-mobile-drawer-open] flag, but src/app/_components/header.tsx can mount both mobile drawers at once (document-breadcrumb and document-actions). Closing one deletes the flag even if the other is still open, so the scroll lock drops prematurely. A reference count or shared open-state coordination would avoid this.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/_components/drawer.tsx` around lines 16 - 24, The shared
html[data-mobile-drawer-open] flag in the drawer open effect is being cleared by
one drawer even when another mobile drawer is still open. Update the drawer
state coordination in drawer.tsx, using the existing open effect and cleanup
logic, so the flag is only removed when no drawers remain open; a small shared
reference count or centralized open-state tracker shared with header.tsx will
prevent premature scroll-lock release.


return (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
noBodyStyles={noBodyStyles}
fixed={fixed}
repositionInputs={repositionInputs}
open={open}
{...props}
/>
);
};

Drawer.displayName = "Drawer";

const DrawerTrigger = DrawerPrimitive.Trigger;

const DrawerPortal = DrawerPrimitive.Portal;

const DrawerClose = DrawerPrimitive.Close;

const DrawerOverlay = React.forwardRef<
Expand All@@ -32,32 +51,59 @@ const DrawerOverlay = React.forwardRef<
{...props}
/>
));

DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;

const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
overlayClassName?: string;
showHandle?: boolean;
bottomUnderlay?: boolean;
bottomUnderlayHeight?: number;
}
>(({ className, overlayClassName, children, ...props }, ref) => (
<DrawerPortal>
<DrawerOverlay className={overlayClassName} />
<DrawerPrimitive.Content
ref={ref}
className={cn(
// overflow-hidden: Vaul adds a tall ::after for drag/backdrop; without clipping it becomes scrollable empty space.
// border-x/t only — shorthand `border` draws a bottom edge above the keyboard / home indicator.
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto max-h-none flex-col overflow-hidden rounded-t-[10px] border-x border-t border-sidebar-border bg-sidebar",
"duration-[280ms] ease-[cubic-bezier(0.22,1,0.36,1)] transition-[height,bottom]",
className,
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-sidebar-border" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
>(
(
{
className,
overlayClassName,
showHandle = true,
bottomUnderlay = false,
bottomUnderlayHeight,
children,
...props
},
ref,
) => (
<DrawerPortal>
<DrawerOverlay className={overlayClassName} />

{bottomUnderlay && bottomUnderlayHeight && bottomUnderlayHeight > 0 ? (
<div
aria-hidden="true"
className="pointer-events-none fixed inset-x-0 bottom-0 z-[51] bg-sidebar"
style={{ height: `${bottomUnderlayHeight}px` }}
/>
) : null}

<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-[52] mt-24 flex h-auto max-h-[calc(100dvh-1rem)] flex-col overflow-hidden rounded-t-[10px] border-x border-t border-sidebar-border bg-sidebar",
className,
)}
{...props}
>
{showHandle ? (
<div className="mx-auto mt-4 h-2 w-[100px] shrink-0 rounded-full bg-sidebar-border" />
) : null}

{children}
</DrawerPrimitive.Content>
</DrawerPortal>
),
);

DrawerContent.displayName = "DrawerContent";

const DrawerHeader = ({
Expand All@@ -69,6 +115,7 @@ const DrawerHeader = ({
{...props}
/>
);

DrawerHeader.displayName = "DrawerHeader";

const DrawerFooter = ({
Expand All@@ -80,6 +127,7 @@ const DrawerFooter = ({
{...props}
/>
);

DrawerFooter.displayName = "DrawerFooter";

const DrawerTitle = React.forwardRef<
Expand All@@ -95,6 +143,7 @@ const DrawerTitle = React.forwardRef<
{...props}
/>
));

DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

const DrawerDescription = React.forwardRef<
Expand All@@ -107,6 +156,7 @@ const DrawerDescription = React.forwardRef<
{...props}
/>
));

DrawerDescription.displayName = DrawerPrimitive.Description.displayName;

export {
Expand Down
17 changes: 14 additions & 3 deletions src/app/_components/editor/document-publish-panels.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,10 +13,13 @@ import {
} from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState, type ReactNode } from "react";
import { flushSync } from "react-dom";

import { Button } from "~/app/_components/button";
import { cn } from "~/lib/utils";
import {
applyMobileDrawerKeyboardInset,
focusMobileDrawerInput,
MobileDrawerEditBody,
MobileDrawerNavHeader,
MobileDrawerScreenHeader,
Expand DownExpand Up@@ -349,7 +352,6 @@ export function DocumentPublishMobileDrawer({
stageIsMeasured={stage.stageIsMeasured}
stageRef={stage.stageRef}
getMotionRef={stage.getMotionRef}
focusInputIdOnEnter={{ "edit-url": "publish-slug-mobile" }}
renderView={(currentView) =>
currentView === "edit-url" ? (
<MobilePublishEditUrlView
Expand All@@ -364,8 +366,17 @@ export function DocumentPublishMobileDrawer({
statusRow={statusRow}
onEditUrl={() => {
stage.measureMainStage();
stage.expandStageForKeyboardView();
stage.goToView("edit-url", 1);
flushSync(() => {
stage.expandStageForKeyboardView();
stage.goToView("edit-url", 1);
});
const input = document.getElementById("publish-slug-mobile");
if (input instanceof HTMLInputElement) {
focusMobileDrawerInput(input);
window.setTimeout(() => {
applyMobileDrawerKeyboardInset();
}, 50);
}
}}
/>
)
Expand Down
3 changes: 1 addition & 2 deletions src/app/_components/header.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,7 +4,6 @@ import { usePathname } from "next/navigation";
import { SidebarTrigger } from "./sidebar";
import { DocumentBreadcrumb } from "./document-breadcrumb";
import { DocumentActions } from "./document-actions";
import { CommandMenuButton } from "./command-menu-button";
import { DocumentPublishButton } from "./document-publish-button";

export function Header() {
Expand All@@ -13,7 +12,7 @@ export function Header() {
pathname.startsWith("/documents/") && pathname !== "/documents";

return (
<header className="flex h-12 shrink-0 items-center justify-between gap-2 rounded-t-2xl bg-background px-4">
<header className="z-10 flex h-12 shrink-0 items-center justify-between gap-2 bg-background px-4 max-md:absolute max-md:inset-x-0 max-md:top-0 md:relative md:rounded-t-2xl">

@coderabbitaicoderabbitaiBotJun 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Make the mobile header safe-area aware.

With viewportFit: "cover" enabled in src/app/layout.tsx Lines 28-30, max-md:absolute max-md:top-0 plus a fixed h-12 puts this bar in the unsafe area on notched iPhones. src/app/documents/layout.tsx Lines 55-58 only offset the scroll root by 3rem, so the status bar can overlap the breadcrumb/actions and the first content row. Add env(safe-area-inset-top) to the header height/padding and mirror that inset in the mobile top offset.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/_components/header.tsx` at line 15, The mobile header in the header
component is positioned too close to the top edge when viewportFit cover is
enabled, so update the header styling to account for the safe-area inset on
notched devices. Adjust the header’s mobile height/padding to include
env(safe-area-inset-top), and make sure the mobile top offset used in the
documents layout mirrors that same inset so the breadcrumb/actions and first
content row are not overlapped.

<div className="flex min-w-0 flex-1 items-center gap-2">
<SidebarTrigger />
{isDocumentPage ? (
Expand Down
20 changes: 1 addition & 19 deletions src/app/_components/mobile-drawer/mobile-drawer-view-stack.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,10 +10,6 @@ import {
mobileDrawerViewTransition,
mobileDrawerViewVariants,
} from "./constants";
import {
applyMobileDrawerKeyboardInset,
focusMobileDrawerInput,
} from "./utils";

export type MobileDrawerViewStackProps<T extends string> = {
view: T;
Expand All@@ -22,8 +18,6 @@ export type MobileDrawerViewStackProps<T extends string> = {
stageIsMeasured: boolean;
stageRef: RefObject<HTMLDivElement | null>;
getMotionRef: (view: T) => RefObject<HTMLDivElement | null> | undefined;
/** When this view finishes entering, focus the input with this id. */
focusInputIdOnEnter?: Partial<Record<T, string>>;
renderView: (view: T) => ReactNode;
className?: string;
};
Expand All@@ -38,12 +32,9 @@ export function MobileDrawerViewStack<T extends string>({
stageIsMeasured,
stageRef,
getMotionRef,
focusInputIdOnEnter,
renderView,
className,
}: MobileDrawerViewStackProps<T>) {
const focusId = focusInputIdOnEnter?.[view];

return (
<div className={cn("bg-sidebar text-sidebar-foreground", className)}>
<div
Expand All@@ -54,7 +45,7 @@ export function MobileDrawerViewStack<T extends string>({
)}
style={stageIsMeasured ? { minHeight: stageMinHeight } : undefined}
>
<AnimatePresence initial={false} mode="wait" custom={direction}>
<AnimatePresence initial={false} custom={direction}>
<motion.div
key={view}
ref={getMotionRef(view) as Ref<HTMLDivElement>}
Expand All@@ -68,15 +59,6 @@ export function MobileDrawerViewStack<T extends string>({
"w-full bg-sidebar",
stageIsMeasured && "absolute inset-x-0 top-0",
)}
onAnimationComplete={(definition) => {
if (definition !== "center" || !focusId) return;
const input = document.getElementById(focusId);
if (!(input instanceof HTMLInputElement)) return;
focusMobileDrawerInput(input);
window.setTimeout(() => {
applyMobileDrawerKeyboardInset();
}, 50);
}}
>
{renderView(view)}
</motion.div>
Expand Down
Loading