Wrong text-align in BaseInput

[alimehasin]

Dependencies check up

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

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

v7.11.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

The BaseInput component does not respect the closest dir attribute. Specifically, when there are two nested div elements where the outer div has dir="rtl" and the inner div has dir="ltr", the text alignment of the <TextInput />and <NumberInput /> components within the inner div is incorrect.

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

https://codesandbox.io/p/sandbox/text-input-dir-issue-lw23kv

Possible fix

Remove text-align: var(--input-text-align); from Input.module.css

https://github.com/mantinedev/mantine/blob/c087030bbc67a895cb39475b0494ed5a6dc5e7ab/packages/%40mantine/core/src/components/Input/Input.module.css#L148

Self-service

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

[alimehasin]

Removing text-align will break PinInput

[alimehasin]

I think setting up text-align to inherit or initial would solve the problem in .wrapper

[rtivital]

It is not planned to change these styles, you can override text-align and other styles on your side per component with Styles API if the default styles do not meet your requirements.