NumberInput rightSectionWidth extends beyond right section and prevents clicking into input in that area

[Nantris]

What package has an issue

@mantine/core

Describe the bug

The area just before the rightSection cannot be clicked to activate the input in v7. This was not an issue in v5/v6 and it's particularly problematic with small NumberInputs like shown below. The rightSection's extents are highlighted in red.

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.1.3

If possible, please include a link to a codesandbox with the reproduced problem

It can be reproduced by adjusting the width of the inputs on the demo page https://mantine.dev/core/number-input/

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

[7iomka]

This happens because rightSectionWidth by default have value equal to the input height, and controls are positioned inside of it.
This behavior can be improved by override rightSectionWidth value under the hood if it doesn't passed from props and if rightSection is not used for something else with NumberInput.
Alternative workaround is to use under the hood rightSectionPointerEvents="none" and override this value on controls.

[Nantris]

Thanks for the reply @7iomka. If we define a custom rightSectionWidth then the values become uncentered:

With rightSectionWidth defined

Default positionining

[7iomka]

Thanks for the reply @7iomka. If we define a custom rightSectionWidth then the values become uncentered:

With rightSectionWidth defined

Default positionining

I said that rightSectionWidth needed to have default override under the hood by library, not on your side.
In this case padding-x will contain this value + default padding and position will remain centered.

[Nantris]

Thanks for your reply @7iomka. Sorry if I'm still not understanding correctly, you're saying this should be considered a bug in Mantine?

[7iomka]

Thanks for your reply @7iomka. Sorry if I'm still not understanding correctly, you're saying this should be considered a bug in Mantine?

I suppose this is an overlooked issue that can be fixed in the above way by the author of the library

[rtivital]

Fixed in 7.2.1.