DxcNumberInput calls onChange function with '' when "." character is entered

[fredofm]

Describe the bug
Not sure if it's a bug or I'm doing something wrong with the component.

When you type:

• "1," -> the component transform this value into "1". It can make sense because as you din't type the fractional part it will return the integer one.
• "1." -> the component transforms this value into "". It can make sense but I would expect the same behaviour as "1,".

It's not a big thing but as I'm creating my own validations, the user will receive an error like "value is required" even if he enters a value like "1.".

To Reproduce

1. Include a DxcNumberInput in your code, like:

() => {
  const [value, setValue] = useState("");
  const onChange = ({ value }) => {
    setValue(value);
  };
  const onBlur = ({ value }) => {
    setValue(value);
  };

  return (
    <DxcInset space="2rem">
      <DxcNumberInput
        label="Enter your age"
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        optional={false}
        clearable={true}
      />
    </DxcInset>
  );
}

2. Set a breakpoint in onChange function to check the received value.
3. Enter "1." and check the received value.

Expected behaviour

I would expect:

• Component will transform "1." value to "1", similar to the current behaviour when typing "1,".

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context

Using halstack-react version 9.1.0.

"@dxc-technology/halstack-react": "^9.1.0"

Add labels
Add any applicable label like the concerned components or the target version of the Design System where the bug has been found.

[GomezIvann]

Hi @fredofm!

First of all, sorry for the late response. This is a fair request, I'm currently working on it. I will keep you updated with my progress here 🚀

[GomezIvann]

Hello again @fredofm!

I've reproduced the error. It looks like it is a bug from the HTML <input type=" number" />, which understands the comma as a decimal number when there are no decimals at all (1,, 12,, 4483,, ...) but doesn't apply the same logic on the dotted ones.

Is this a very important fix for you guys? If so, we can work on a patch to address it.

Code example

const App = () => (
        <input
          type="number"
          onChange={(event) => {
            console.log(event.target.value);
          }}
        />
);

[fredofm]

Hi @GomezIvann,

Thanks a lot for your time and your research :)

I've been discussing this topic with my colleagues and we would like to have that patch you mentioned for the component.

It's not something urgent right now, but we plan to use this component on different screens for the next user stories and it will become a bigger problem for us.

[GomezIvann]

Hello again @fredofm!

No problem, I will create an issue for that feature and we will add it to our roadmap as soon as possible. I will keep you updated!

Thanks for all the feedback 🚀

[GomezIvann]

This issue continues here: #1668. I'm closing this one.