InputNumber: Cannot Type Zero as an Input

[fufupati]

Describe the bug

The InputNumber component doesn't accept 0 as an input regardless from it's properties.

Tested on Hungarian layout keyboard (code page 852).

Reproducer

https://primereact.org/inputnumber

PrimeReact version

10.6.6

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

Tested on Chrome, Edge, Firefox

Steps to reproduce the behavior

No response

Expected behavior

No response

[fufupati]

I've debugged a little and in the InputNumber OnInputKeyDown function switch statement's default case:

default:
    event.preventDefault();
    let char = event.key;
    console.log(event)
    if (char) {
        const _isDecimalSign = isDecimalSign(char);
        const _isMinusSign = isMinusSign(char);

        if ((event.code && (event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
            insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
        }
    }

    break;

The event.code is checked if it starts with 'Digit', this is problematic because for me when I press zero the event.code = "Backquote", so the condition will fail. In previous builds this wasn't a problem because not the event.code was checked but instead the event.keyCode which should be preferred.

Proposed solution:

default:
    event.preventDefault();
    let char = event.key;
    console.log(event)
    if (char) {
        const _isDecimalSign = isDecimalSign(char);
        const _isMinusSign = isMinusSign(char);
        const isDigit = event.keyCode >= 48 && event.keyCode <= 57;
        const isNumpadDigit = event.keyCode >= 96 && event.keyCode <= 105;

        if ((event.code && (isDigit || isNumpadDigit) && Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
            insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
        }
    }

    break;

[fufupati]

Just read that the keyCode property is deprecated (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), so instead I think the best solution is to just omit the (event.code.startsWith('Digit') || event.code.startsWith('Numpad')) part from the condition as I don't see if it adds any value, the Number(char) >= 0 && Number(char) <= 9) part already checking if it's a number. I tested it and it seems to work fine now and I can write '0'.

[melloware]

@fufupati please submit a PR. IT looks like that is what PrimeVue is doing: https://github.com/primefaces/primevue/blob/401dd225677796f05321b0c98ac68b51f3487de6/components/lib/inputnumber/InputNumber.vue#L547C13-L549C14

[melloware]

I submitted a PR