Skip to content

feat(FieldError): expose elementType prop to control host element#9759

Open
fellipeutaka wants to merge 3 commits intoadobe:mainfrom
fellipeutaka:fix/field-error-element-type
Open

feat(FieldError): expose elementType prop to control host element#9759
fellipeutaka wants to merge 3 commits intoadobe:mainfrom
fellipeutaka:fix/field-error-element-type

Conversation

@fellipeutaka
Copy link

Summary

Closes #9757

Implements Option C from the issue: expose elementType on FieldErrorProps so users can control the host element without triggering the render-mismatch warning.

Problem

FieldError delegates to Text, which defaults elementType to 'span'. The DOMElement utility warns when render returns an element that doesn't match ElementType. Since Text always passes 'span' as the expected type, any render override returning a block element (e.g. <div>) fires a spurious warning — even though FieldError is typed for HTMLDivElement.

Solution

Add elementType?: string to FieldErrorProps and pass it through to Text. This lets users opt in to a block-level host element without going through the render prop:

<FieldError elementType="div">
  <ul>
    <li>Error one</li>
    <li>Error two</li>
  </ul>
</FieldError>

Changes

  • packages/react-aria-components/src/FieldError.tsx — add elementType to FieldErrorProps and forward to Text
  • packages/react-aria-components/test/FieldError.test.js — add tests for default tag, elementType override, and block-level children

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.
@github-actions github-actions bot added the RAC label Mar 8, 2026
expect(element.tagName).toBe('DIV');
});

it('allows block-level children when elementType is div', async () => {
Copy link
Member

Choose a reason for hiding this comment

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

Does this throw any sort of error? As far as I know jest won't do html validation

Copy link
Author

Choose a reason for hiding this comment

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

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.

@reidbarber
Copy link
Member

You'll need to sign the CLA and close and re-open the issue for the build to pass.

@fellipeutaka fellipeutaka reopened this Mar 9, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FieldError: render prop warns when returning a non-<span> element, even though <span> is invalid as parent of block elements like <ul>

3 participants