Skip to content

perf(autosize): fix maxHeight regression under min-height CSS; add Vitest browser test suite#49

Merged
mattcosta7 merged 3 commits into
copilot/improve-autosize-performancefrom
copilot/copilotimprove-autosize-performance
Jun 29, 2026
Merged

perf(autosize): fix maxHeight regression under min-height CSS; add Vitest browser test suite#49
mattcosta7 merged 3 commits into
copilot/improve-autosize-performancefrom
copilot/copilotimprove-autosize-performance

Conversation

Copilot AI commented Jun 29, 2026

Copy link
Copy Markdown

The performance rewrite on this branch introduced a subtle maxHeight bug by reusing the library's last-written inline height instead of the live computed height. Under min-height/max-height CSS, these diverge — e.g. the library writes "40px" but the element renders at 100px — producing a smaller, incorrect maxHeight cap. This PR restores the original semantics and adds a real-browser test suite to prevent regressions.

src/index.js — maxHeight fix

// Before: uses last-written inline height (misses min-height clamping)
const parsedHeight = height !== null ? parseFloat(height) : parseFloat(getComputedStyle(textarea).height)

// After: always reads rendered height so maxHeight reflects actual layout
const parsedHeight = parseFloat(getComputedStyle(textarea).height)

The cachedBorderAddOn optimization, height tracking for ResizeObserver, and the reads-before-writes batching structure are all preserved.

Test suite — Vitest browser mode

jsdom is a non-starter here (scrollHeight always returns 0, no layout). Tests run in real Chromium via Playwright.

  • vitest.config.js — browser mode, playwright provider, chromium, headless
  • test/autosize.test.js — 7 tests covering:
    • Grows on input / shrinks on delete
    • min-height floor is respected (rendered height ≥ min-height)
    • Task 1 regression guard: with min-height set, style.maxHeight is not capped below the live computed height
    • Drag-resize latches isUserResized and clears maxHeight
    • Form reset re-enables autosize
    • unsubscribe() stops further resizing

Supporting changes

  • devDependencies: vitest@4.1.9, @vitest/browser@4.1.9, @vitest/browser-playwright@4.1.9, playwright@1.61.1 (all at patched versions per advisory DB check)
  • package.json "test" script replaced with vitest run; "test:watch" added; pretest build hook removed (tests import src/index.js directly, no build needed)
  • tsconfig.json: skipLibCheck: true to prevent vitest's @types/chai conflicting with the existing target: es5 build
  • .gitignore: exclude test/__screenshots__/

Copilot AI changed the title [WIP] Fix maxHeight calculation regression in autosize performance perf(autosize): fix maxHeight regression under min-height CSS; add Vitest browser test suite Jun 29, 2026
Copilot AI requested a review from mattcosta7 June 29, 2026 15:05
@mattcosta7 mattcosta7 marked this pull request as ready for review June 29, 2026 18:29
@mattcosta7 mattcosta7 requested a review from a team as a code owner June 29, 2026 18:29
Copilot AI review requested due to automatic review settings June 29, 2026 18:29
@mattcosta7 mattcosta7 merged commit 9e4ba38 into copilot/improve-autosize-performance Jun 29, 2026
@mattcosta7 mattcosta7 deleted the copilot/copilotimprove-autosize-performance branch June 29, 2026 18:29

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR fixes a maxHeight regression in autosize when min-height/max-height CSS causes the rendered height to diverge from the library’s last-written inline height, and it introduces a real-browser (Chromium/Playwright) Vitest test suite to prevent future regressions.

Changes:

  • Restore original maxHeight semantics by always deriving it from the live computed (rendered) textarea height.
  • Add Vitest browser-mode configuration and a new browser-based test suite covering growth/shrink, min-height behavior, drag-resize disabling, form reset, and unsubscribe cleanup.
  • Update tooling/config (package.json scripts + devDependencies, tsconfig.json skipLibCheck, .gitignore) to support the new test setup.
Show a summary per file
File Description
src/index.js Fixes maxHeight calculation to use rendered/computed height under CSS clamping.
test/autosize.test.js Adds Chromium-based regression and behavior tests for autosizing and resize detection.
vitest.config.js Enables Vitest browser mode using the Playwright provider (Chromium headless).
package.json Replaces placeholder test script with vitest run and adds Vitest/Playwright devDependencies.
package-lock.json Locks the new Vitest/Playwright dependency graph.
tsconfig.json Adds skipLibCheck to avoid type-check conflicts introduced by new test tooling types.
.gitignore Ignores Vitest browser screenshot output directory.

Review details

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  • Files reviewed: 4/8 changed files
  • Comments generated: 2
  • Review effort level: Low

Comment thread test/autosize.test.js
// With the pre-fix logic, style.maxHeight would be capped lower than the
// actual rendered height, which is incorrect.
textarea.style.minHeight = '120px'
const {unsubscribe} = autosize(textarea)
Comment thread package.json
Comment on lines +18 to +19
"test": "vitest run",
"test:watch": "vitest",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants