Bug - Number input - Cursor is overwriting the number 1 in input field

[ppadti]

Describe the problem In Number input component, when we enter number 1, that is overwriting with the cursor. https://www.patternfly.org/components/number-input/#numberinput

How do you reproduce the problem? Problem exist in Number input component. Try typing 1 in input field. https://www.patternfly.org/components/number-input/#numberinput

Expected behavior There should not be any overwriting between number 1 and cursor.

Is this issue blocking you? yes. https://issues.redhat.com/browse/RHOAIENG-6354

Screenshots

What is your environment?

• OS: Fedora Linux 38
• Browser: chrome
• Version: 125.0.6422.141

What is your product and what release date are you targeting?

Any other information?

[srambach]

Hi @ppadti. Could you please add what environment you are seeing this in?

[ppadti]

Hi @ppadti. Could you please add what environment you are seeing this in?

yeah, I have updated it.

[ppadti]

Hi @tlabaj I noticed this issue has been moved to Needs info, Is there any additional information that you need from me to help move it forward?

[mcoker]

@ppadti "Needs info" is just a label we use internally while we're figuring out what the issue is before triaging it 👍

I have a hunch it's one of a couple of things.

1. The input field in that component is type="number", which among other things, tells most browsers to add arrows to the right of the input by default that let you increment the input's value. We remove those arrows in this component, since we have our own + and - buttons that let you increment the input value. This looks OK on my machine (mac) with our supported browsers, but I'm wondering if maybe chrome on fedora doesn't handle it the same.
2. We use text-align: right on the input field, which may play a role either by itself or in combination with the bullet above.

I created this codepen that modifies the inputs in a few different ways - can you put your cursor in these and report back with what it looks like in each (except the first/original example, which should just reproduce the issue since it's a default number input) - https://codepen.io/mcoker/pen/LYovamv

[ppadti]

@ppadti "Needs info" is just a label we use internally while we're figuring out what the issue is before triaging it 👍

I have a hunch it's one of a couple of things.

1. The input field in that component is type="number", which among other things, tells most browsers to add arrows to the right of the input by default that let you increment the input's value. We remove those arrows in this component, since we have our own + and - buttons that let you increment the input value. This looks OK on my machine (mac) with our supported browsers, but I'm wondering if maybe chrome on fedora doesn't handle it the same.
2. We use text-align: right on the input field, which may play a role either by itself or in combination with the bullet above.

I created this codepen that modifies the inputs in a few different ways - can you put your cursor in these and report back with what it looks like in each (except the first/original example, which should just reproduce the issue since it's a default number input) - https://codepen.io/mcoker/pen/LYovamv

@mcoker thank you so much for taking the time to look into this. I have attached screenshots of the result.

[ppadti]

@mcoker Is there any updates on this issue?

[mcoker]

@ppadti my apologies, we're wrapping up a sprint and just started a new one and are pretty heads down at the moment wrapping up work for our upcoming beta release of the next major version (patternfly v6). I'm working on being able to reproduce this within our team (getting access to a Fedora instance) so we can troubleshoot and see if we're able to issue a fix or provide a workaround.

[ppadti]

@mcoker No worries!! thank you for the update.

[wise-king-sullyman]

@ppadti do you know if you see the same behavior on newer versions of Fedora? I checked on 39 and wasn't able to reproduce the issue.

[ppadti]

@ppadti do you know if you see the same behavior on newer versions of Fedora? I checked on 39 and wasn't able to reproduce the issue.

I checked it on fedora 39 and this is what I see.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[ppadti]

Hi @wise-king-sullyman I would like to know is there any update on this issue?