DEV Community: Gichan

Why CSS dvh ignores the mobile keyboard — and how to fix it

Gichan — Wed, 08 Apr 2026 08:58:53 +0000

CSS dvh (dynamic viewport height) was introduced to replace the infamous 100vh bug on mobile. It handles the browser URL bar appearing and disappearing — but it completely ignores the on-screen keyboard.

When the keyboard opens, position: fixed elements get covered. dvh won't help you here.

Why dvh ignores the keyboard

The CSS viewport units spec treats the virtual keyboard as an overlay — it doesn't resize the layout viewport. So dvh, svh, and 100vh all stay the same value when the keyboard opens.

The real fix: Visual Viewport API

keyboardHeight = window.innerHeight - window.visualViewport.height

When the keyboard opens, visualViewport.height shrinks while window.innerHeight stays fixed. The difference is the keyboard height.

But there's a catch — iOS Safari and Android Chrome behave differently.

iOS Safari

When the keyboard opens, iOS scrolls the visual viewport upward. visualViewport.offsetTop increases. It fires both resize and scroll events on visualViewport — but window resize does not fire.

Android Chrome

Android shrinks the layout viewport itself. window.innerHeight decreases and window.resize fires. visualViewport.offsetTop stays 0.

If you only handle one case, the other breaks.

The guard logic

const handleWindowResize = () => {
  const vv = window.visualViewport
  const currWidth = window.innerWidth
  const widthChanged = currWidth !== layoutWidthRef.current

  // iOS: vv.offsetTop > 0 when keyboard is open → skip
  // Android: width unchanged when keyboard opens → skip
  // True orientation/resize: width changes → update reference
  if (!vv || (vv.offsetTop === 0 && widthChanged)) {
    layoutHeightRef.current = window.innerHeight
    layoutWidthRef.current = currWidth
  }
}

In testing, keyboard opens didn't affect innerWidth, while orientation changes did. This is the heuristic that makes the width guard reliable for Android.

The hook

I wrapped this into use-dynamic-viewport, which injects two CSS variables automatically:

npm install use-dynamic-viewport

import { useDynamicViewport } from 'use-dynamic-viewport'

export function Layout() {
  useDynamicViewport() // injects --dvh and --keyboard-height on :root
  return <div className="app">...</div>
}

/* App height tracks the visible area */
.app {
  height: var(--dvh, 100svh);
}

/* Fixed bottom bar stays above the keyboard */
.input-bar {
  position: fixed;
  bottom: var(--keyboard-height, 0px);
  left: 0;
  right: 0;
}

You can also read the values in JS:

const { viewportHeight, keyboardHeight, isKeyboardOpen } = useDynamicViewport()

Details

iOS Safari ✅ Android Chrome ✅
Next.js App Router / SSR safe ✅
Zero dependencies, ~0.8KB gzipped
React 17+, TypeScript
19 tests (Vitest + React Testing Library)

GitHub: https://github.com/rl0425/use-dynamic-viewport
npm: https://www.npmjs.com/package/use-dynamic-viewport

I built a tiny hook to solve the missing navigation guard in Next.js App Router

Gichan — Fri, 03 Apr 2026 09:45:15 +0000

The problem

Ever spent 10 minutes filling out a form, accidentally clicked a link, and lost everything?

While working on an admin dashboard, I kept running into this. Users would fill out a long form, accidentally hit the browser back button or click a wrong link — and all their work was gone.

The fix seemed simple: "just show a confirmation popup when they try to leave."

Turns out it's more complicated than that.

Three exit paths you need to cover

To properly guard a form, you need to handle all three ways a user can leave:

Tab close / page refresh → beforeunload event
SPA navigation (<Link> clicks, router.push()) → router-level intercept
Browser back/forward button → popstate event

The first one is easy — just attach a beforeunload listener. The other two are where things get tricky.

Why existing solutions didn't work

React Hook Form's isDirty

formState.isDirty tells you whether the form is dirty. It doesn't block navigation. It's a state value, not a navigation guard.

Next.js Pages Router's router.events

In Pages Router, you could intercept SPA navigation like this:

router.events.on('routeChangeStart', handler)

This worked great. Then App Router came along and removed it entirely. No official replacement. GitHub Issues are full of "how do I do this now?" questions with answers that basically say "copy-paste this 30-line useEffect into every project."

react-router-prompt

React Router only. Doesn't work with Next.js.

What I built

I got tired of copy-pasting the same workaround into every project, so I packaged it into a hook: use-form-guard.

npm install use-form-guard

useFormGuard(isDirty) // that's it

Works with any form library — just pass a boolean:

// React Hook Form
useFormGuard(formState.isDirty)

// Formik
useFormGuard(formik.dirty)

// TanStack Form
useFormGuard(form.state.isDirty)

Custom dialog support too:

useFormGuard({
  isDirty,
  message: 'You have unsaved changes. Leave anyway?',
  onBlock: () => openMyModal(), // return Promise<boolean>
  enabled: !isPreviewMode,
})

How it works under the hood

1. Tab close / refresh — `beforeunload`

window.addEventListener('beforeunload', (e) => {
  if (!isDirty) return
  e.preventDefault()
  e.returnValue = message
})

Modern browsers ignore custom messages for security reasons — you'll always get the browser's native dialog. Nothing we can do about that.

2. SPA navigation — monkey-patching `history.pushState`

This is the interesting one. In Next.js App Router, both <Link> clicks and router.push() internally call window.history.pushState. So if we patch that, we catch everything.

const original = window.history.pushState
window.history.pushState = function (...args) {
  if (isDirty) {
    if (window.confirm(message)) original.apply(this, args)
    return
  }
  original.apply(this, args)
}

No router.events needed.

3. Browser back/forward — `popstate` + `history.go(1)`

When the back button is pressed, popstate fires after the navigation already happened. The trick is to immediately reverse it with history.go(1), then show the confirmation dialog.

window.addEventListener('popstate', () => {
  if (!isDirty) return
  window.history.go(1) // reverse immediately
  setTimeout(() => {
    if (window.confirm(message)) window.history.go(-1) // allow if confirmed
  }, 100)
})

The setTimeout is needed because history.go(1) is asynchronous — we wait for the history to restore before showing the dialog.

4. Avoiding stale closures — `useRef` pattern

To keep useEffect dependencies as [] while always reading the latest isDirty value:

const shouldBlockRef = useRef(shouldBlock)
shouldBlockRef.current = shouldBlock // sync on every render

Event listeners read shouldBlockRef.current instead of the captured value.

Bugs I hit along the way

beforeunload tests always failing in jsdom

new Event('beforeunload') defaults to cancelable: false, so e.preventDefault() does nothing and defaultPrevented stays false. Fix:

new Event('beforeunload', { cancelable: true })

TypeScript 6.0 DTS build error

tsup sets baseUrl internally during .d.ts generation, which is deprecated in TypeScript 6.0. Fix:

{
  "compilerOptions": {
    "ignoreDeprecations": "6.0"
  }
}

How it compares

Feature	use-form-guard	Manual beforeunload	react-router-prompt
Tab close / refresh	✅	✅	❌
SPA navigation	✅	❌	✅ (RR only)
Back/forward button	✅	❌	✅ (RR only)
Next.js App Router	✅	❌	❌
Custom dialog	✅	❌	✅
Zero dependency	✅	✅	❌

Known limitations

onBlock (async custom dialog) in App Router may have edge cases due to React concurrent rendering starting before pushState is intercepted. Works reliably with the window.confirm path.
Tab close/refresh always shows the browser's native dialog — no way around it.

Wrapping up

What started as a small annoyance turned into a surprisingly deep rabbit hole — jsdom quirks, TypeScript build issues, npm auth problems. But the result is a ~0.8KB hook that replaces a 30-line copy-paste in every project.

npm install use-form-guard

If you try it out and find any bugs or have ideas for improvement, feel free to open an issue!

npm: https://www.npmjs.com/package/use-form-guard
GitHub: https://github.com/rl0425/use-form-guard