feat(FieldError): expose elementType prop to control host element#9759
Open
fellipeutaka wants to merge 3 commits intoadobe:mainfrom
Open
feat(FieldError): expose elementType prop to control host element#9759fellipeutaka wants to merge 3 commits intoadobe:mainfrom
fellipeutaka wants to merge 3 commits intoadobe:mainfrom
Conversation
Fixes adobe#9757 — Option C: expose elementType on FieldErrorProps so users can set elementType="div" when wrapping block-level children (e.g. <ul>) without triggering the DOMElement render mismatch warning.
snowystinger
reviewed
Mar 8, 2026
| expect(element.tagName).toBe('DIV'); | ||
| }); | ||
|
|
||
| it('allows block-level children when elementType is div', async () => { |
Member
There was a problem hiding this comment.
Does this throw any sort of error? As far as I know jest won't do html validation
Author
There was a problem hiding this comment.
You're right — jsdom doesn't validate HTML, so that test was meaningless. Replaced it with two tests that actually verify the console.warn behavior: one that asserts no warning fires when elementType="div" matches the render prop's returned element, and one that asserts the warning does fire when they mismatch (the original bug). The key insight is that children must also be provided so FieldErrorInner doesn't early-return before reaching Text/DOMElement.
Member
|
You'll need to sign the CLA and close and re-open the issue for the build to pass. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #9757
Implements Option C from the issue: expose
elementTypeonFieldErrorPropsso users can control the host element without triggering the render-mismatch warning.Problem
FieldErrordelegates toText, which defaultselementTypeto'span'. TheDOMElementutility warns whenrenderreturns an element that doesn't matchElementType. SinceTextalways passes'span'as the expected type, anyrenderoverride returning a block element (e.g.<div>) fires a spurious warning — even thoughFieldErroris typed forHTMLDivElement.Solution
Add
elementType?: stringtoFieldErrorPropsand pass it through toText. This lets users opt in to a block-level host element without going through therenderprop:Changes
packages/react-aria-components/src/FieldError.tsx— addelementTypetoFieldErrorPropsand forward toTextpackages/react-aria-components/test/FieldError.test.js— add tests for default tag,elementTypeoverride, and block-level children