React Hook Form input returns empty string for invalid numbers ex. '+-123'

[anik95]

I want to show an error message when user enters an invalid number inside a number type input field.
ex. if the user enters '+-123', it should show an error.

But the problem is when such an invalid value is inserted, it becomes an empty string.
I believe this is how HTML input fields work.
How can this be resolved?

TIA

example of my current implementation

<Controller
            control={control}
            name="Start.Stationing"
            rules={{
              min: MIN_LOCALIZATION,
              max: MAX_LOCALIZATION,
            }}
            render={({ field }) => (
              <StyledTextField
                {...field}
                label={t('project:START_LOCALIZATION')}
                variant="outlined"
                type="number"
                onKeyPress={handleKeyPress}
                onBlur={(e) => {
                  if (e.target.value) field.onChange(formatNumberToString(e.target.value));
                  field.onBlur();
                }}
                {...((errors?.Start?.Stationing?.type === 'max' ||
                  errors?.Start?.Stationing?.type === 'min') && {
                  error: true,
                  helperText: t('shared:VALID_LOCALIZATION_RANGE', {
                    min: MIN_LOCALIZATION,
                    max: MAX_LOCALIZATION,
                  }),
                })}
              />
            )}
          />

[bluebill1049]

I don't think we are doing any of the value update inside the controller, can you double check onKeyPress={handleKeyPress}?

[maliheNoroozi]

I have the same problem. I am using chakra input with type=number and react hook form. For invalid numbers like 32-- or 23-+, I am getting empty string as value. ALso I do not have any code in handleKeyPress.

[leapful]

@maliheNoroozi

Please provide a codesandbox url to re-produce the issue.

[ucle7am]

It's happening becouse of type="number"

[lalame888]

I have same question
I want the arrow to Increase and Decrease value
so set type="number"

input has string "21-3"
but value is empty string
how to get the "21-3" ?