Typing a decimal as the first inputted character moves the cursor to the left side of the decimal

[paullexen]

Describe the bug When I click into the input for the first time and type a decimal point (.) the cursor moves to the left side of the decimal point.

To Reproduce I've  included a Codesandbox link that demonstrates the issue.

1. Click into the input
2. Type a decimal point/period character "."
3. Type "7"
4. Type "5"

The cursor moves to the left side of the decimal point after the first keystroke, and then subsequent characters are inserted on the left side of the decimal point.

NOTE: this doesn't always happen due to something internal to the component. For example, if you enter a number and then delete it and repeat the above steps, the same thing doesn't happen. It seems to only be the first time the decimal point character is typed.

Expected behavior I would expect the cursor to remain on the right side of the decimal point when typing a decimal point.

Code Sandbox CodeSandbox template

Additional context This is a big deal for a client of mine because users are inputing data using this component, and if they don't type a "0" in front of the decimal point it resets the cursor and inputs the wrong number (e.g. ".75" becomes "75."), which at best is annoying and at worst causes bad data input if they don't notice.

[abacaj]

I noticed this as well, it looks like you can transform the value before it's parsed.

As long as it starts with a dot '.', you can prepend the '0.' before it (check the first character):

      transformRawValue={(value) => {
        if (value.length > 0) {
          if (value[0] === '.') {
            return '0.' + value.slice(1);
          }
        }

        return value;
      }}

'.5' => becomes '0.5'

[stale[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. Thank you for your contributions.