Select unmounts error element, making aria-live validation announcements unreliable

[joselages]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

9.1.0

What package has an issue?

@mantine/core

What framework do you use?

React Router

In which browsers you can reproduce the issue?

All

Describe the bug

I am working on field-level validation accessibility and noticed that Mantine Select removes the error element from the DOM completely when there is no error.

This becomes a problem when trying to announce validation changes with aria-live.

For screen reader announcement to be reliable, the live region usually needs to remain mounted in the DOM and only have its text updated. With Select, the error container is unmounted entirely, so there is no stable node to attach aria-live to.

The result is that:

• the field error message is not represented by a persistent DOM node
• screen reader announcement becomes inconsistent or impossible if the app relies on Mantine’s built-in error rendering
• consumers have to render a second custom error element outside the component just to make validation accessible
• This is especially awkward because Mantine already has an error prop, so from the component API it looks like the accessibility path should already be supported.

Expected behavior

One of these would make the component much easier to use accessibly:

1. keep the error container mounted in the DOM even when empty
2. provide an option like keepErrorMounted
3. provide a documented accessibility pattern / API for associating a persistent error live region with Select

Actual behavior

When error becomes falsy, the error element is removed from the DOM entirely.

That means an app cannot depend on Mantine’s own error node as a persistent live region.

Minimal example

A simplified example:

<Select
  label="Bank"
  data={[{ value: "1", label: "Bank A" }]}
  error={hasError ? "Required field" : null}
/>

When hasError changes from true to false, the error node disappears from the DOM.

When it changes back to true, a new node is mounted instead of updating an existing live region.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

Possible options:

• keep the error element mounted and render an empty string when there is no error
• add a prop like keepErrorMounted

Self-service

• I would be willing to implement a fix for this issue

[phamvutinh]

I opened #8953 to address this. It adds an opt-in keepErrorMounted prop to Input.Wrapper (inherited by Select, TextInput, etc.) that keeps the error element mounted even when there is no error, so its text updates in place and it can be used as a stable aria-live region:

<Select
  label="Bank"
  keepErrorMounted
  errorProps={{ 'aria-live': 'polite' }}
  error={hasError ? 'Required field' : null}
/>

Default is false, so it's fully backwards compatible. Feedback on the approach welcome.