fix(types): allow TanStack Form onChange/onBlur to target textarea elements#186
Conversation
🦋 Changeset detectedLatest commit: 63a7712 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Bundle ReportChanges will increase total bundle size by 36 bytes (0.03%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: use-mask-input-esmAssets Changed:
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #186 +/- ##
=======================================
Coverage 98.47% 98.47%
=======================================
Files 15 15
Lines 262 262
Branches 68 71 +3
=======================================
Hits 258 258
Misses 4 4
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report in Codecov by Harness.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6e36db8e45
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void; | ||
| onBlur?: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void; |
There was a problem hiding this comment.
With strictFunctionTypes enabled (including consumers using strict), this union makes the callback type require a handler that can accept both input and textarea events. Existing masked <input> usage that annotates onChange as ChangeEvent<HTMLInputElement> or reads input-only fields such as event.target.files now fails with TS2322 even though it never renders a textarea; the previous signature accepted those handlers. Please model the element type generically/with overloads or a bivariant handler instead of replacing the input event parameter with a union.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Good catch. Fixed by switching onChange/onBlur to method-shorthand signatures instead of a plain union, so both HTMLInputElement-only and HTMLTextAreaElement-only annotated handlers stay assignable (bivariant parameter checking), alongside the inline unannotated case. Added a test covering the HTMLInputElement-only (event.target.files) scenario. See the latest commit.
Generated by Claude Code
…ements PR #184 pinned TanStackFormInputProps' onChange/onBlur to ChangeEvent<HTMLInputElement>/FocusEvent<HTMLInputElement>, but use-mask-input also masks <textarea> elements. Widen both to ChangeEvent<HTMLInputElement | HTMLTextAreaElement> / FocusEvent<HTMLInputElement | HTMLTextAreaElement>, declared with method shorthand so the parameter is checked bivariantly: handlers explicitly typed for just HTMLInputElement (e.g. reading event.target.files) or just HTMLTextAreaElement (e.g. event.target.cols) both stay assignable, alongside the common inline unannotated handler.
6e36db8 to
63a7712
Compare
1 participant
Summary
Follow-up to #184. That PR fixed #183 (implicit
anyon the TanStack FormonChangeevent) by pinningTanStackFormInputProps.onChange/onBlurtoChangeEvent<HTMLInputElement>/FocusEvent<HTMLInputElement>.use-mask-inputalso supports masking<textarea>elements (seemaskHelpers.ts, which handlesHTMLInputElement | HTMLTextAreaElementthroughout). Pinning the event type toHTMLInputElementonly mistyped the inlineeventparameter for anyone masking a<textarea>field, and broke consumers who explicitly annotate their handler for either element type.Fix
onChange/onBlurare now declared with method shorthand syntax and widened toChangeEvent<HTMLInputElement | HTMLTextAreaElement>/FocusEvent<HTMLInputElement | HTMLTextAreaElement>. Method shorthand makes the parameter checked bivariantly, so:onChange: (event) => field.handleChange(event.target.value)) infers correctly for both input and textarea fields,ChangeEvent<HTMLInputElement>(e.g. readingevent.target.files) stays assignable, andChangeEvent<HTMLTextAreaElement>(e.g. readingevent.target.cols) also stays assignable.(An earlier revision of this PR used a plain union type instead of method shorthand, which broke the input-only case — thanks to @chatgpt-codex-connector for catching that in review.)
Tests
useTanStackFormMasktests covering: a masked<textarea>field with an inline handler, and a handler explicitly typed forHTMLInputElement-only members (.files).Verification
tsc --noEmit: cleanmain)npm pack, installed viafile:) that the original e is type any on tanstack form #183 repro, a masked textarea field, and an explicitly-typed input-only handler all type-check correctly.A changeset (
patch) is included.