allowLeadingZeros should not allow leading zeros

[Enlitened]

Setting allowLeadingZeros only removes the leading zeros when focus is lost.

Setting allowLeadingZeros should not allow leading zeros (similar to allowNegative). This interferes with a defaultValue of '0', the leading zero is never cleared.

[s-yadav]

defaultValue is something that can be looked into. But while typing leading zero is indeed needed. For instance, you typed 1000002, then you want to delete the first char (1) and update it to (2). If we clear it while the user is in focus. It would create a usability issue.

[Enlitened]

Would it be possible to separate this into two settings - allowLeadingZeros and removeLeadingZeros? allowLeadingZeros = false would not allow you type the first character as a zero, removeLeadingZeros would remove the zeros when focus is lost.

[s-yadav]

IMO not allowing typing breaks the UX, and not in favour of providing a breaking behaviour prop, given that it gets consistent with what the user is expecting at the end without preventing them to do something. (Here by user I refer to end-user)

[Enlitened]

Is it not the same functionality as allowNegative - it also prevents the user from typing a minus? I just think that not allowing leading zeros would be a very common use case - basically any currency input with formatting would use it. As it is now, it will still format currency with zeros in front, that seems incorrect?

[vernonk]

What if allowLeadingZeroes is respected on the first change (maybe not so much first change but when that is a length of 2)? If I click to the right of the 0 and type 2 I get 02. That's obviously not correct based on allowLeadingZeroes being false. I could see the usability case you mention, but in the initial number piece the setting is valid and that 0 should be removed.

[ipatieff]

In my code:

const rangeOfLimit = (values: NumberFormatValues) => {
const { formattedValue, value, floatValue } = values as RangeOfLimitProps;
  if (value.charAt(0) === '0') {
    if (value.charAt(1) && value.charAt(1) != '.') {
      return false;
    }
  }
  return formattedValue === '' || (floatValue <= 99_999.99 && floatValue >= 0);
  }
 

Props

<NumberFormat
  isAllowed={rangeOfLimit}

Source: https://stackoverflow.com/a/53214578/18722313

[MantasGulbinskas]

What if allowLeadingZeroes is respected on the first change (maybe not so much first change but when that is a length of 2)? If I click to the right of the 0 and type 2 I get 02. That's obviously not correct based on allowLeadingZeroes being false. I could see the usability case you mention, but in the initial number piece the setting is valid and that 0 should be removed.

let value = e.target.value.replace(/['.-]/g, ""); while (value.length > 1 && value.startsWith("0")) { value = value.substring(1); }